文章目录
- 七、Vue-cli
- 1.环境搭建
- 2.实例
- 2.1 表单
- 2.2 delete操作
- 3.Vuex
七、Vue-cli
1.环境搭建
首先安装vue-cli
安装成功的话，输入vue就可以弹出菜单
用vue list可以查看vue-cli的功能，像热更新和编译等等
然后开始构建一个项目，并且在此处选第一项，构建完整项目。第二项是构建轻量级项目，但是我们的组件是需要时刻更新且到浏览器还要再次进行编译的，所以选择第一个。
最后是全部的配置，另外最后一个要选择手动安装，因为国外的源太慢了，直接cd进来然后cnpm i就可以了
开始安装node_modules
下载之后是这样的
并且都自动配置了webpack和环境等等的配置，还有alias，resolve的路径之类的信息，可以从build和config都可以看到，现在来写一个小实例简单的应用到vue2框架。
2.实例
2.1 表单
一定要记住，一旦修改了自带的文件名，要从src的几个原始文件中对应的都要进行修改。
首先先写一个很简单的页面，在此之前，先改一下文件名，并且建立一个src/components/common来作为公共组件的directory
然后来创建一个表格在table.vue内作为公共组件
思路是这样的，
- 公共组件已经编辑好了，然后让Index.vue引入即可
- 将Table在Index.vue 的template位置找到一个合适的位置放置
- 用父级标签包裹住Table
- 在App.vue内使用router-view路由，并且使用上面提到的Index.vue的template来填充这个router-view
- 而路由本身的连接，用默认地址直接链接到Index.vue即可
然后就可以运行了。
cnpm install less less-loader --save-dev就解决了问题。然后改完了又遇到了这个问题
这是因为ESLint检查运行的时候出现了问题。要改成
顺带提一嘴，Eslint真是让人强行改了代码不规范毛病的这么个ECMA检测工具
改了十分钟代码规范···终于成功了…
去除掉CSS样式，最终是这样的
现在我们希望可以使用读取来的数据来制定出表格，而不是去手写，那就需要使用json和组件，首先创建出json，和两个v-for，一个遍历value，一个遍历key
Index.vue所产生的json数据
使用组件做出的读取遍历
这是提示我们在使用了v-for之后要给vue一个信息，谁是被拿来循环的key，并且要用v-bind标注起来。
重新运行也可以达到效果
2.2 delete操作
下面在表单中模拟一个delete操作
首先把delete按钮画出来
然后让父级去执行删除操作，调用父级参数，使用:parent="this"将父级暴露出来，用props将parent传进来进行删除操作。
主要是父子级通信的知识。
使用filter方法对数据进行过滤操作
3.Vuex
全局状态管理，统一组件关系，单一状态集合(一次请求，处处使用)
作用：
- 数据跨组件共享
- 防止数据被意外修改
- debug，Ops方便，追踪数据源的修改
State：所有的变量，参数
Mutations ：对数据进行的某种行为操作，同步
Devtools：监控谁调用了Mutation
Actions：触发Mutation对State进行操作，异步
Vue component：修改组件的唯一办法就是，告知Actions触发Mutation修改State，对自身进行Update
Backend API：进行数据交互的API
安装
直接用npm安装即可
然后在vm入口处进行引入
接下来要实现使用Vuex管理修改数据
先创建一个新的组件来实现修改数据的功能
然后在父类组件中放置我们的子级组件
因为我们的state无法被从外界直接进行修改一定要通过mutation，所以我们来到注入Vue 的文件开始写mutation和调度mutation的action
另外在这里提一句，并非一定要用action才能调度mutation，外界也可以直接访问mutation进行功能的实现，commit方法可以专门用来搜索mutation内的方法，调用过来传参就可以了
但是看起来很怪，因为打破了常规的Vuex生态系统，所以还是使用action来进行调度。
在这里多说一句，一个mutation可以修改多个state，一个action可以修改多个mutation
然后action行为就完成了，最后一步就是派送action的操作，来到触发修改数据的button处，对action进行派送，使用dispatch
然后数据就修改成功了，运行即可
