vue小实践

项目名：collect_money

gitHub地址：https://gitee.com/chensai/collect_money.git

项目介绍

• 快餐店收银demo

• vue-cli搭建的单页应用

• 技术应用：vue+webpack+elementUI(按需引入/完整引入的区别比较和用法)+vuex(实践)+iconfont+mockjs(简单实践)+elementUI(按需引入)

项目说明

• 该项目是通过最近对vue的了解进行实践，里面踩的一些坑记录了一部分，做完小例子之后发现还是有很多东西没有沉淀下来，需要多积累。

• 这里面最主要的实践在于通过组件模板和vuex的结合使用，将数据在组件间进行流转（这里没有异步拿状态数据），旨在感受与react的使用的差异，还需要深入了解。

• 里面只有两个接口是真实的，有一个mock的，在与实践。

• 由于还不是很熟悉，代码有的地方会冗余，后面学习继续完善。

• 已经放到了自己的站点，访问http://cs.chensai.top或者http://www.chensai.top都可访问

图片.png

安装教程

• cnpm i

• cnpm start === cnpm run dev(本地开发)

• cnpm run build(打包部署)

实践后的感受

• vue基础信息学习，根据二八法则，用20%的努力换取80%的收获，例如：学习的知识面很广，但是在工作中仅会用到20%，去完成80%的业务场景

• 引入iconFont字体图标库，自认为这是一个很好的实践，无论什么项目，它像字体一样我们直接就可以对它进行样式的修改，也可以生成各种图片（svg/jpg等格式）

• webpack这里主要是和elementUI结合使用，本项目是进行按需引入的，而不是在main.js中完整引入的，这样打包下来的js文件会小380k左右。⚠️：在引入elementUI时，一些弹框、模态框不需要使用Vue.use()中间件，这样会自动先弹一次！！

• elementUI和iView的选择，我是根据2018年Vue生态圈的UI库的stars的排名进行选择的，本来也想实践一下element团队的UI，所以选择了它，感觉用起来也不想antd那么简洁，不过现在蚂蚁出了一套antd-vue的UI库，还累来得及看呢。

• mockJS，这里主要是了解它的用法，它的更深入的一些匹配正则的语法规范没有涉及到，但是通过模拟post请求，已经达到了mock的效果。

• axios/fetch，这分别是vue和react各自推荐配合自己的 生态圈的两种请求方式，但是这种请求方式针对mockJS会有限制，mockJS不会针对fetch进行拦截，对axios就像和ajax使用会拦截。所以使用fetch请求，就不要和mockjs一起使用了！

• dva/vuex，对dva的使用也用了三个多月，官网也看了两遍。这里简单做一下回顾。

• dva的数据流转方式是通过在组件上dispath触发action，到models的effects（异步）或者reducers（同步），将数据保存至状态，然后以props的形式注入到组件中进行使用，对一些协同使用的状态数据，通过subscriptions通过监听url的变化就可以。
• vuex则是通过Vuex.Store创建的一个状态实例，它的数据流转也是通过组件触发，流转到store里面的actions（异步）或者mutations（同步），对state的数据进行合并，不过这里可能会出现各种问题（getters只执行一次的问题、mutationos中参数变异的问题，可以通过深拷贝解决）。然后就是在组件中使用，这里写法有很多种方式，我最喜欢的就是通过vuex的mapState、mapMutations、mapGetters使用，至于store的modules，一些大佬们也不推荐使用，太繁琐！

• Dva和Vuex图解

Dva:https://dvajs.com/guide/fig-show.html
Vuex:https://blog.csdn.net/liang377122210/article/details/76973983](https://blog.csdn.net/liang377122210/article/details/76973983