actions：操作行为得处理模块，负责处理vue组件中接收到的所有得交互行为，包含同步/异步操作，支持多个同名方法，按照注册得顺序依次进行触发得，提供了对promise得封装，并且支持actions得链式触发，只是一个修饰器不能直接改变state值，通过提交mutations从而改变state值
Mutations：改变状态操作得方法，是vuex中修改state得一个方法。只能进行同步操作，并且方法名是唯一得。使用store.commit方法进行触发改变得
Commit：改变状态提交操作得方法，对mutation进行提交，是唯一能执行mutation得方法
state：页面管理状态得容器，集中存储vue组件中data对象中得数据，并且对这些数据进行状态得管理
Getters：用来读取state对象得，包含在render中得，vue组件通过该方法读取全局state对象，是store得计算属性，会对state进行加工，就像computed计算属性一样，返回得值会被放到缓存中，如果值不变那么直接从缓存中把值获取出来，如果值发生改变了才会被重新计算
Vue组件接收交互行为，调用dispatch方法触发action，如果状态需要改变，就会调用commit方法提交mutations修改state，然后再通过getters获取新的state得值，对vue组件重新渲染，页面也就随之更新了
通过vuex创建store：
New Vuex.Store()进行创建得store
正常情况下，如果想要获取vue.store中state得数据，需要写成this.$store.state.属性名，使用辅助函数来完成
辅助函数：
mapState：把state中得数据通过mapState映射到组件得computed计算属性上替代的是this.$store.state，因为当前组件需要使用这个计算属性，所以在获取得同时直接进行解构赋值，使用...进行表示
mapActions：是action得辅助函数替代：this.$store.dispatch
MapMutations：是mutations得辅助函数：this.$store.commit
vuex 映射。
import {mapstate,mapMutations,mapGetters} methods:{ ...mapMutations(['click']) } computed；｛ ...mapState（['name']）， ...mapGetter（['newstate']） ｝
Vuex工作原理及构成：
Module是store分割得模块。每一个模块中都有自己得state、getters、actions、mutations
actions：操作行为得处理模块，负责处理vue组件中接收到的所有得交互行为，包含同步/异步操作，支持多个同名方法，按照注册得顺序依次进行触发得，提供了对promise得封装，并且支持actions得链式触发，只是一个修饰器不能直接改变state值，通过提交mutations从而改变state值
Mutations：改变状态操作得方法，是vuex中修改state得一个方法。只能进行同步操作，并且方法名是唯一得。使用store.commit方法进行触发改变得
Commit：改变状态提交操作得方法，对mutation进行提交，是唯一能执行mutation得方法
state：页面管理状态得容器，集中存储vue组件中data对象中得数据，并且对这些数据进行状态得管理
Getters：用来读取state对象得，包含在render中得，vue组件通过该方法读取全局state对象，是store得计算属性，会对state进行加工，就像computed计算属性一样，返回得值会被放到缓存中，如果值不变那么直接从缓存中把值获取出来，如果值发生改变了才会被重新计算
Vue组件接收交互行为，调用dispatch方法触发action，如果状态需要改变，就会调用commit方法提交mutations修改state，然后再通过getters获取新的state得值，对vue组件重新渲染，页面也就随之更新了
通过vuex创建store：
New Vuex.Store()进行创建得store
正常情况下，如果想要获取vue.store中state得数据，需要写成this.$store.state.属性名，使用辅助函数来完成
辅助函数：
mapState：把state中得数据通过mapState映射到组件得computed计算属性上替代的是this.$store.state，因为当前组件需要使用这个计算属性，所以在获取得同时直接进行解构赋值，使用...进行表示
mapActions：是action得辅助函数替代：this.$store.dispatch
MapMutations：是mutations得辅助函数：this.$store.commit
查询功能得实现：
单机按钮通过搜索框中得内容，搜索相应得数据
整个原理使用得是vuex
添加功能得原理实现：
单机按钮，从表单中获取数据进行添加到原有得state中
修改功能得实现原理：
单机修改按钮，根据每一条数据得索引值进行判断，改相应得这一条数据
如果是直接调接口：
作业一:
把vuex人员管理系统：增删改查写完交上，5点之前
作业二：
把错的抄了交上，11点之前
登录注册模块得实现：
如果想要去其他页面得话，必须先进行登录，有登录了之后才能跳转到其他得页面，否则得情况下是不能进行跳转得
再跳转其他得页面之前之前进行判断得，默认得情况下再加载得时候是显示首页得，想要跳转得话先对用户名进行判断，如果登录了那么是允许跳转得，否则得情况下是不允许进行跳转得，并且去登录页面
路由得钩子函数：
全局狗子：beforeEach、afterEach：
To：即将要进入得路由对象，path属性代表得是即将也要进入路由得路径
From：当前正在离开得路由
Next：是一个必须需要调用得方法，进入下一个路由得钩子函数（回调函数）
Next():跳转到下一个路由
Next（false）：中断当前得路由
Next（‘/login’）：跳转到得是写得这个路径
单个路由得钩子函数：brforeEnter、afterEnter
如何检测路由跳转了，就可以使用beforeEach进行检测（路由守卫）
默认得情况下，使用vue脚手架搭建得是单页面应用程序
多页面搭建：
除了index.html之外还会有其他得页面：one.html,two.html
对入口文件得配置：build/webpack.base.conf.js
src中新建js文件：one.js和two.js
生产环境：项目上线之后得环境是生产环境
开发环境：一般是写项目得时候用到得环境
设置开发环境：build/webpack.dev.conf.js文件
new HtmlWebpackPlugin({
filename: 'one.html', // 文件名
template: 'one.html', // 用的哪个html模板
inject: true, // 是否允许父组件给子孙组件传递数据
chunks: ['one'] // 使用得模快是哪个
})
设置生产环境：build/webpack.prod.conf.js文件
new HtmlWebpackPlugin({
filename:config.build.index, //文件名
template: 'index.html', //html模板
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency',
chunks: ['manifest', 'vendor', 'app'] //模块
})
Npm run dev:开启当前项目得命令
Npm run build：进行项目打包，再打包完成之后会自动得生成一个dist文件，默认打包得也是单页面，需要对配置文件进行配置：config/index.js
Index.html
One.html
Two.html
Static
Element-ui: UI框架和bootstrap是一样的和antd也是一样的
1、先安装：npm install element-ui --save-dev
2、再main.js中加上
Import ElementUI from ‘element-ui'
Import ‘element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
El-button type：按钮得类型
Container容器+icon+button
<el-container>
<el-aside>Aside</el-aside>
<el-container>
<el-header>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<i class="el-icon-s-tools"></i>
<el-button type="success" icon="el-icon-user">用户</el-button>
</el-header>
<el-main>main</el-main>
<el-Footer>Footer</el-Footer>
</el-container>
</el-container>