vue初次尝试

在vue如火如荼的年代，我不得不跟随潮流，写起了渐进式JavaScript。

为什么我会如此晚的来接触vue呢？我把原因归咎于我对它的偏见。早在我初入前端时，就已经是angular的天下了，当时甚至连jQuery都不会写的我着实被angular的强大惊到了，所以一直追寻着angular的脚步（虽然当时没有用angular）。

直到有一天，在社区看到了vue的出现，记得当时看了很多文章都在宣传vue的mvvm的框架，有双向绑定的特性等等，了解到这几点，就对它心生不屑，想到angular辣么强大，也是MVVM模式的框架，最大的特点也是双向绑定，你一个后起vue、又是国产的，肯定是抄袭而来。。。。（唉，当时多么的愚蠢），于是和vue第一时间的接触机会擦肩而过了。

vue迅速发展，已经来到了2.0时代，而且来到了现在的团队，大量的在使用vue生产大小规模的项目，再不去接受vue就真的是顽固不化了。正好手头来了个hybrid需求，新模块，新需求，索性就勇敢迈出一步，大胆尝试下新套餐。

react和vue吸引我的地方就是高度组件化的开发方式（angular 指令还是很笨重）。

首先，说下这次实践用到的东西

vue+vue-router+vuex+mint-ui

项目采用vue-cli生成代码架构，目录已经很清晰了。但是并没有集成vuex，开率到多个组件传递状态，手动把vuex加入，很简单，src目录下建立`store`目录:

├── assets
│   └── images
├── components
├── router
├── service
├── store
│   ├── actions.js
│   ├── getters.js
│   ├── index.js
│   ├── mutation-types.js
│   ├── mutations.js
│   └── state.js
├── styles
├── utils
└── view
├── main.js
├── App.vue

vuex就包括五部分内容，

state    -> 应用的状态
mutation -> vuex中唯一处理state的方法，传入handle，改变相应state。注意 mutation是同步方法
action   -> 和mutation类似，但是他提交的是mutation，而不能直接修改state，并且action可以是异步方法
getter   -> 获取状态，省去了在组件中处理原始的state，getter直接拿过来业务需要的数据
module   -> 大应用分模块

之前写过react配合redux，感觉很繁琐，现在写vue形式的状态管理，给人很舒服的感觉，简单、明了。

然后，虽然采用了mint-ui，但是没用几个组件，项目起初主要考虑的是用到它的 TabContainer组件用来在同一个路由下左右滑动切换卡片，用 MessageBox来做弹窗提示，当时考虑开发效率问题，但是现在想想都可以自己实现的，没必要在移动端引入几十k的UI库。

vue的话，就不用写了，简单写就是template 写法，组件间传递状态有了vuex变的 如探囊取物，傻瓜式写法，注意的就是组件的抽离，要分清纯净组件和业务逻辑组件。

然后就是踩的坑了，

• 请求的方法是自己封装的，高版本fetch，不支持的话就promise，然后到了低版本iOS上测试出了问题，不支持Promise，原因是忘了引入pollify

• 项目并不是在根目录下，只是作为一个大项目的一个模块，vue-cli打出来的文件默认是放当前项目根目录下的，所以静态资源访问路径不对，只要把/config/index.js的配置项改了就好，assetsPublicPath 和 assetsRoot 改成自己需要的就行了

• iOS兼容性问题，视觉要求列表的item按下有个状态，于是就用css的active解决了，但是在iOS上没效果，原因是iOS做了限制，只要给当前标签加上 <a ontouchstart=""> ，详见 https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari

还好vue的坑没怎么踩，还算顺利。这次只是对vue的使用，后面会去看他的运行机制，再做个总结。

现在出了用ts写vue，下一步再继续尝试。

参考自：

vuex中文book文档