Vue框架学习(五)——Vue-cli

七、Vue-cli

1、环境搭建

首先安装：

cnpm i vue-cli -g

安装成功的话，输入vue就可以弹出表单

用vue list可以查看vue-cli的功能，像热更新和编译等等

然后构建一个项目，并且在此处选第一项，构建完整项目。第二项是构建轻量级项目，但是我们的组件是需要时刻更新的且到浏览器还要再次进行编译的，所以选择第一个。

最后是全部的配置，另外最后一个要选择手动安装，因为国外的源速度太慢了，直接cd进来然后cnpm i 就可以了：

接下来开始安装node_modules
下载之后是这样的：

并且都自动配置了webpack和环境等等的配置，还有alias，resolve的路径之类的信息，可以从build和config都可以看到，现在来写一个小实例简答的应用到vue2框架。

2、实例

<1>、表单

一定要记住，一旦修改了自带的文件名，要从src的几个原始文件中对应的都要进行修改。

首先先写一个很简单的页面，在此之前，先改一下文件名，并且建立一个src/components/common来作为公共组件的

然后创建一个表格在table.vue作为公共组件：

思路是这样的：

1. 公共组件已经编辑好了，然后让index.vue引入即可。
2. 将Table在index.vue的template位置找到一个合适的位置放置
3. 用父级标签包裹住Table
4. 在App.vue内使用router-view路由，并且使用上面提到的index.vue的template来填充这个router-view
5. 而路由本身的连接，用默认地址直接链接到index.vue即可

然后就可以运行了。

在编写结束之后出现了这样的错误，这样错误的主要原因是因为Vue里的CSS解析器无法解析定义的less sass类型，需要手动安装第三方的CSS解析器，作者是CSS类型是less，所以直接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>、delete操作

下面在表单中模拟一个delete操作
首先把delete按钮画出来

然后让父级去执行删除操作，调用父级参数，使用:parent="this"将父级暴露出来，用props将parent传进来进行删除操作。

主要是父子级通信的知识。

使用filter方法对数据进行过滤操作：

3、Vuex

全局状态管理，统一组件关系，单一状态集合(一次请求，处处使用)

作用：

1. 数据跨组件共享
2. 防止数据被意外修改
3. 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可以修改多个update，一个action可以修改多个mutation

然后action行为就完成了，最后一步就是派送action的操作，来到触发修改数据的button处，对action进行派送，使用dispatch

然后数据就修改成功了，运行既可以出现我们想要的页面。。。