vue项目介绍

项目效果展示：

项目中遇到的问题：

• 下拉加载更多在chrome浏览器的手机模拟中没有响应mint-ui框架中loadmore自带的loadBottom方法，后来把代码部署到手机上可以正常调用，加载出了更多数据。
• 使用mint-ui 中的 Swipe，必须给此标签元素设置高度才能正常显示（没设置高度检查元素的时候发现高度为0，内部元素并没有将盒子撑开）

使用到的技术点

• vue-router路由
• axios进行网络请求
• mint-ui indicator(加载提示框)
• mint-ui Swipe轮播图
• mint-ui lazy-load (图片懒加载)
• mint-ui loadMore（上拉加载更多数据）
• vue preview（缩略图预览）
• 组件间通信（添加商品至购物车时，购物车数量要改变）

项目打包

执行命令npm run build即可完成打包

打包时要考虑的问题

• dist文件夹太大？
• 代码走了缓存，修改代码，重新打包之后，修改并没有生效
• 只需改了css样式，build.js文件更新？
• main.js小改动，导致build.js文件更新（文件过大，浪费流量）

对应解决办法：
1、代码压缩：

• 使用webpack中的uglifyjs-webpack-plugin插件
  (1.6M->852kb)
• Mint-ui按需引入（852kb－>459kb)

2、 提取css插件，设置名称

• 使用插件extract-text-webpack-plugin
• 提取css插件，设置名称

new ExtractTextPlugin("[contenthash].css"),

3、build.js文件拆分：提取第三方包

• 通过插件CommonsChunkPlugin处理入口

// 再加一个入口
vendors:['vue','vue-router','axios','vue-preview'],
//出口
filename:'[chunkhash].js'
plugins配置：
// 提取公共模块
new webpack.optimize.CommonsChunkPlugin({
    // 清单，用来记录使用者和第三方的关系
    names:['vendors','manifest']
}),

4、路由懒加载，用的时候才去加载（节省流量）