VueJS项目开发爬坑指南

      今年6月份大学刚毕业，之前实习就做前端开发。就是干点切图的杂活，后来觉得工作太无聊能力也有限辞职找了份Angular2的前端开发工作，后台配的是Java前端是用Angular2 + TypeScript + wijmo5。当时那个wijmo5真的太恶心了，看文档根本看不懂要git它的源码。干了2两个月，辞职回家过年去了。现在看wijmo5还是有心里阴影，不过他的图表、表单控件做的真心牛逼毕竟是个收费的前端UI框架。

      过年看了看不死不活的微信小程序，又学了1个月的React和React Native。3月份进了新的公司开始实习，然后就开始了Vue的爬坑之路。

1、先从最近的坑来说，页面A的样式会影响到B页面

这问题的我从浏览器的控制台中发现B页面中还存在A页面的样式文件。

解决方法：图1-1 添加 scoped 在 style标签中

图1-1

2、同步和异步

我的第一个SPA项目就是因为大量使用同步造成首屏加载慢，页面跳转卡

原来是这样的图2-1

图2-1

解决方式使用异步路由如图2-2

图2-2

异步路由完成后封装一个懒加载组件lazy-compents（这个组件还没封装好）

3、公共状态怎么处理

       一开始是使用的了Vue的事件bus来传递的，后来看了vuex后改用了vuex的状态机来管理项目状态。没有Vuex的项目是不完整的Vue项目

4、单元测试和UI测试e2e

      写了一个测试类和一个场景测试就不玩了感觉不好玩。nightwatch.js、浏览器驱动、karma.js你们可以玩一下。

项目目录结构

项目1

图3-1

项目2：

图3-2

项目3：

图3-3

项目截图展示：

图4-1

图4-2

图4-3

资料整理：

Vue全家桶

          Vue文档    https://cn.vuejs.org/v2/guide/

          VueX文档  https://vuex.vuejs.org/zh-cn/

          vue-loader  https://vue-loader.vuejs.org/en/

          vue-router  https://router.vuejs.org/zh-cn/

          vue-vue-resoucre  http://blog.csdn.net/qq_24122593/article/details/52954726