vue坑
项目地址:https://pan.baidu.com/s/1c1Dflp2
使用前提:安装nodejs环境,webpack的配置官网的例子跟着跑一遍,会vue开发
研究webpack+vue研究了一个多星期了,走了很多坑,现在在下面写一下那些年的那些坑。
项目文件夹解释:compaent文件夹是通用的vue组件存放的地方,image文件夹是图片存放地址,professional文件夹是业务文件存放地址
搭建前必看:我们搭建前在网上找了很多的资料,觉得这篇是不错的对搭建WV环境有好处的:http://www.cnblogs.com/linfangshuhellowored/p/5657285.html
坑1:webpack+vue(以下简称WV)的项目结构
在使用WV框架之前,我使用的项目结构是普通的那种就是所有的css在一个文件夹 所有的js在一个文件夹 所有的图片在一个文件夹 所有的html在一个文件夹,在WV框架下我的结构是业务主导型 简单来说就是整个项目有一个base.css, 然后vue.js作为base.js,然后其他所有的页面通用型的vue组件合并文一个js文件叫做compaent,这三个文件是每一个html必须引用的 他们直接放在文件的根目录下,然后业务js,业务css,业务html放在同一个文件夹里面。
坑2:多入口
好像网上好多例子都是但入口,后来找到一些是实现多入口的,但是我们的html文件是几十个总不能一个一个写吧,所以找了一个方法,这个getEntry里面通过nodejs的path模块和glob模块匹配目录下所有的指定文件,这样就省事多了(如果听不懂我在说什么 这个说的比较好:http://www.cnblogs.com/legu/p/5741116.html)
坑3:css分离
使用es6的写法后,我们页面的css一般都是这种姿势引人用的 var detailsCSS = require('../app/details.css') ,这个时候如果直接打包的话 会把details.css直接打包到页面里,如果有用学想分离的话,可以使用extract-text-webpack-plugin插件,使用方式参考我的代码啊,
坑4:提取公共js
我们用vue和vue组件 肯定要在页面js里面引入这些js吧 如:import Vue from 'vue',import detailbtn from './components/detailbtn', 如果我们什么都不做直接就打包最后的结果就是每个业务js里面都会包含vue.js的源码 和vue组件的源码,这应该不是我们要的效果吧,我们要的是vue分离出来,vue组件分离出来,我们使用CommonsChunkPlugin插件:他的使用我可以参开这个:http://blog.csdn.net/github_26672553/article/details/52280655
坑5:版本号控制
清除缓存肯定要用版本号啊,我们分离了css肯定要在页面单独用link方式引入啊,分离了js肯定要script方式单独引入啊,可以使用这个插件:html-webpack-plugin 他的用法是生成html文件,主要是他可以参照模板来生成,而且还支持添加script方式引入js,想想一下:如果我们获取到我们所有的目录html 然后用这个插件对我们所有的html统一处理一下,批量引入分离的js文件 在引入的时候支持hash控制,参考:http://www.cnblogs.com/wonyun/p/6030090.html
坑6:图片资源打包
图片资源打包其实很简单,只是本身的打包不支持html里面引入的图片 ,这个时候我们用html-withimg-loader插件啊,(全局搜索我的webconfig文件 搜html-withimg-loader)需要安装url-loader插件和html-withimg-loader插件
相关文章
- [PHP] 对象和引用
- [HTTP] post传递数据的两种content-type application/x-www-form-urlencoded multipart/form-data
- [Nginx]使用ngx_http_image_filter_module实现压缩图片为缩略图
- [tcp] 服务端大量close_wait 和 time_wait状态
- [nginx] nginx的变量拼接与if判断
- [nginx] nginx的常用内置变量
- [PHP] 发布一个类库到composer
- [PHP] 重要操作手机短信验证逻辑梳理
- [css] position:fixed居中问题
- [PHP] xml转对象函数simplexml_load_string
- [MySQL] 理解MySQL索引合并index_merge
- [MySQL] 理解mysql间隙锁
- MagicAjax 使用介绍(翻译)
- 第三产业的企业的信息化系统的价格机制
- MagicAjax 简单使用介绍(翻译)
- (转帖)asp.net调试错误解决方法收集(1)
- MagicAjax Features (MagicAjax特点 0.30版) (翻译)
- 疑是Microsoft Enterprise Library June 2005的一个小bug (续)
- 疑是Microsoft Enterprise Library June 2005的一个小bug
- MagicAjax 0.30版的更新(翻译)