最近学了一点vue.js，并且根据教程做了一个类似饿了么的APP商家页面。vue.js作为现在很火的一个前端框架，确实有它的很多优点，废话不多说，来总结总结。
一、用到的技术栈：
vue2.5.2+ vue-router2+ vue-cli2+ vue-resource + stylus + flex布局 + es6+ eslint + webpack2
二、实现的功能
Goods、Ratings、Seller组件视图均可上下滚动
商品页 点击左侧menu，右侧list对应跳转到相应位置
点击list查看商品详情页，父子组件的通信
评论内容够可以筛选查看
购物车组件，包括添加删除商品及动效，购物控件与购物车组件之间非父子组件通信，点击购物车图标，展示选择的商品列表
商家实景图片可以左右滑动
loaclStorage缓存商家信息（id、name）
三、项目结构
common/---- 文件夹存放的是通用的css和fonts
components/----文件夹用来存放我们的 Vue 组件
router/----文件夹存放的是vue-router相关配置（linkActiveClass,routes注册组件路由）
build/----文件是 webpack 的打包编译配置文件
config/----文件夹存放的是一些配置项，比如我们服务器访问的端口配置等
dist/----该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
prod.server.js----该文件是测试是模拟的服务器配置，用来运行dist里面的文件，在config/index.js中,build对象中添加一条端口设置port：9000，
App.vue----根组件，所有的子组件都将在这里被引用，eventHub空实例是用来组件间通信的中央数据总线作用，主要连接购买控件和购物车组件之间的数据通信
index.html----整个项目的入口文件，将会引用我们的根组件 App.vue
main.js----入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中
四、开发中遇到的问题：
1.Vue 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
（1）全局安装 vue-cli：npm install --global vue-cli
（2）创建一个基于 webpack 模板的新项目：vue init webpack my-project
（3）安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
注意：如果npm安装失败，直接用命令清理就行，控制台输入：
npm cache clean --force，然后重新安装。
2.如果出现
Error: Cannot find module 'stylus'
说明找不到对应的模块，需要单独安装该模块，cmd命令为
运行 npm install （模块名） --save-dev即可解决
3.vue-loader中的postcss插件能够帮助我们处理css浏览器兼容问题，我们自己不需要自己去手写
Postcss是根据can i use 官网的标准编写的代码
4.如果出现
http://eslint.org/docs/rules/no-unused-vars 'app' is assigned a value but never used
说明diff 这个变量声明且赋值然而在后面没有使用
解决方法：在这段代码上面写 /* eslint-disable no-unused-vars */
5.如果出现
安装vue-resource是用来处理一些前后端交互数据的一个插件。
npm install vue-resource --save
访问https://github.com/pagekit/vue-resource查看其api文档
6.在vue里面不能直接使用src引用图像地址，应该使用:src，
直接使用src在编译的时候会被解析报错
7.在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。一种兼容性比较好的解决方案：
外部有两层：内容包装器wrapper(里面有一层是真正用来扩展内容)+容器底部close
8.
<li class="support-item" v-for="item in seller.support"></li>
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<li class="support-item" v-for="(item,index)" in seller.supports></li>
9.利用vue进行css过渡效果
10.当vue编译运行正常而页面不能正常显示时，这时要多关注一下浏览器的输出console，有可能是js问题，如变量没有定义
11.vue2.0索引不能用$index
循环 v-for="(item, index) in items"
使用 :class="{'current':currentIndex === index}"
v-el 和 v-ref 都弃用，改为使用ref属性为元素或组件添加标记，通过$refs获取
12.在显示配送费和起送费时，第一步：需要在app.vue中引进seller中的数据，第二步：然后在goods.vue组件中引入这两个属性 第三步：在shopcart中使用props接收，最后进行引用
13.购物车组件状态随着selectFoods的属性而改变，selectFoods是通过父组件传过来的，所有的状态都通过selectFoods计算而来，所以绑定了totalPrice()、totalCount()、payDesc()、payClass()等计算属性。也就是说我们通过改变selectFoods就可以改变状态。
这正是vue的好处之一，如果是非MVVM框架如jQuery等去写的话，我们要通过大量的if判断语句操作DOM。
14.padding-top:100% 保证上下padding保持一致
15.formatDate.js是一个自定义的js组件,不是vue组件,目录位于:src/common/js,这种写法是为了练习js的模块化编程
将单独的一个函数写成一个模块
通过export导出函数
通过import导入函数
16.BScroll结构 一定是外层有一个容器，内层是一个wrapper，有一个固定的适口高度，当内层容器的高度超过适口高度的话就可以滚动
17.切记：当传入一个props一定要通过 : ,这是一个规整化指令的缩写
18.这里解释一下border-1px
19.左侧宽度固定，右侧宽度自适应
20.背景模糊效果
filter：blur(10px),注意，所有在内的子元素也会模糊，包括文字，所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android
21.seller组件：
（1）seller页面中商品商家实景图片横向滚动
解决方案：每个li要display：inline-block，因为width不会自动撑开父级ul，所以需要计算ul的width，（每一张图片的width+margin）*图片数量-一个margin，因为最后一张图片没有margin
同时new BScroll里面要设置scrollX: true,eventPassthrough: 'vertical',// 滚动方向横向
（2）打开seller页面，无法滚动
问题分析：出现这种现象是因为better-scroll插件是严格基于DOM的，数据是采用异步传输的，页面刚打开，DOM并没有被渲染，所以，要确保DOM渲染了，才能使用better-scroll，
解决方案：用到mounted钩子函数，同时搭配this.$nextTick()
（3）在seller页面，刷新后，无法滚动
问题分析：出现这种情况是因为mounted函数在整个生命周期中只会只行一次
解决方案：使用watch方法监控数据变化，并执行滚动函数 this._initScroll();this._initPicScroll();
22.eslint 是一个js代码风格检查器，配合vue-cli脚手架中的热更新，可以很方便的定位和提示错误。在公司多人协作开发时可以确保代码风格保持一致，可以很方便的阅读他人的代码。
刚使用时，会不太习惯，但是坚持下来，自己写的代码越来越整齐规范，越来越漂亮，自己会有很大的满足感。对自己，对他人都是一件非常有益的事！
23.最后，进行项目打包
（1）运行npm run build进行打包,生成dist文件
（2）在项目根目录新建一个prod.server.js文件，新建一个httpServer
（3）在config->index.js文件bulid添加一个监听端口：port:9000
将productionSourceMap修改为false
（4）最后运行node prod.server.js
注意：每次修改config->index.js文件bulid都要重新运行npm run build
24.手机测试机巧
将localhost换成自己的ip，Windows在命令行执行ipconfig查看，mac执行ifconfig查看。
然后复制地址栏地址，进入草料二维码，然后生成二维码，然后用手机扫一扫就可以查看了，前提是，你手机和电脑必须在同一个局域网。
25.参考资料：
Vue.js官网
Vue.cli(https://github.com/vuejs/vue-cli)
Vue-resource(https://github.com/vuejs/vue-resource)
Vue-router(https://github.com/vuejs/vue-router)
better-scroll(https://github.com/ustbhuangyi/better-scroll)
Webpack官网(http://webpack.github.io/)
Stylus中文文档(http://www.zhangxinxu.com/jq/stylus/)
cs6入门学习(http://es6.ruanyifeng.com/)
eslint规则(http://eslint.org/docs/rules/)
设备像素比(http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)
Flex布局(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool)
贝塞尔曲线测试(http://cubic-bezier.com/)
