最近一个月，一直在做vue的项目–网格通，参照原生app写成h5页面，嵌套在壳里面，这是公司技术转型的一次尝试。h5页面的优势是开发周期短，可以同时应用在ios和Android端，减少开发成本，但其缺点也很明显，用户体验不如原生。自己也是刚接触vue，只能变学变做，看了vue的官方文档2遍，然后开始用vue-cli搭建整个开发框架，然后大家就在框架基础之上进行开发，开发过程中遇到很多的坑，所以这个系列可以叫做vue爬坑系列。
可圈可点之处
- 接口统一管理 我们在api文件夹里面，通过配置文件，很方便的切换各个环境。
1
2
3
4
5
6
const baseUrl = {
mock: 'https://www.easy-mock.com/mock/59f3068783f2125032d12d06',
dev: 'http://192.168.71.152:8080',
pre: 'http://192.168.71.53:81',
prod: ''
}[config.env || 'mock'];
利用二次封装axios分模块管理各个应用模块的接口，mock是模拟接口，在接口编写完成前，可以模拟接口，这个是通过大搜车的easy-mock来实现模拟接口。可以很方便的通过easy-mock-cli自动化创建项目的api目录结构。
缺陷
-
组件化程度不够 公共组件有搜索框、上传图片、文本输入框、点击下拉动画等等，但组件化程度远远不够，导致每个page文件代码量太多，后面的维护不方便，当时考虑的是由于业务的页面cell元素较多，而且都是不同的结构，v-for也不好使用。组件的可扩展性不够，通用组件必须具备高性能、低耦合的特性，这方面做的还不够。
-
前期业务不够熟悉，业务坑比较多 由于自己对整个业务逻辑不够熟悉，前期搭建架构和编码的时候写错一些逻辑，接口文档没更新，隐藏的逻辑处理，导致后面逻辑bug较多。给自己的教训是项目前期，先要熟悉清楚整个项目的业务逻辑，准备好所有可以利用的资料，才能开始搭建项目框架和编写代码。
-
考虑问题不够全面 比如有些值可能在不同的业务情景下会出现null、空值、undefined等情况，这时如果没加判断很可能导致报错。
-
代码不够简练 这方面主要体现在 ES6 利用不多，比如编写箭头函数可以省略this指向的问题，forEach简化循环代码。if判断不能嵌套，可以利用return阻断后面的运行，进行表单条件的验证判断。提取公共的部分编写公用函数，等等这些方面都能简化代码。
收获和努力方向
总的来说，虽然这个项目有很多不满意的地方，但自己在这个项目中也收获了很多。
-
对Vue的熟练程度加深，基本已经达到能独立完成vue项目的程度。
-
对公司的业务逻辑更加熟悉，为后面的项目打下基础。
努力的方向：
-
学习vue更深的内容，比如vuex、单元测试等等，应用到工作上。
-
多利用ES6的特性简化代码，更加熟练的使用es6，加深前端工程化和组件化的学习和使用。
