vue后台项目demo解析
1、npm与yarn命令对比
| yarn | npm |
|---|---|
| yarn | npm install |
| yarn add react | npm install react --save |
| yarn remove react | npm uninstall react --save |
| yarn add react --dev | npm install react --save-dev |
| yarn update | npm update --save |
安装yarn（替代npm）:
npm install -g yarn
推荐使用yarn，速度快，指令更简单。
检查是否安装成功：
2、node官网安装node
检查是否安装成功（看版本号）：
3、cnpm安装（替代npm）
npm install -g cnpm --registry=https://registry.npmmirror.com
检查是否安装成功：
使用cnpm安装模块：
cnpm install [name]
4、vue脚手架vue-cli(更快搭建vue项目)安装
cnpm install -g @vue/cli
检查是否安装成功：
5、创建项目
vue create 项目名称
安装vue2，默认使用yarn进行安装
cd 项目名；yarnserve 启动服务
6、elmentui使用
安装cnpm i element-ui -S
element-ui全局引入
element-ui按需引入
安装babel-plugin-component（目的：借助次插件按需引入，减小项目体积）:
cnpm i babel-plugin-component -D
下载完成后，在babel.config.js中加入红框代码：
7、vue-router的使用
安装vue-router
cnpm i vue-router@3.5.3
新建文件夹router,在router文件夹中新建index.js
main.js中代码如下：
router/index.js中代码如下：
新建文件夹views，并在views文件夹中创建Home.vue
<div>
我是Home页面
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
</style>
8、删除 node_modules
9、less及lessloader引入
安装：
cnpm i less
cnpm i less-loader @5.0.0
10、数据处理及路由跳转
使用计算属性对menu菜单的数据有没有子项进行筛选：
定义clickMenu方法，点击进行路由跳转：
11、vuex
注意：vue2对应的vuex版本是3
cnpm i vuex@3 -S
这里要处理CommonHeader和CommentAside父子组件传值问题。
main.js中：
创建store文件夹，在store文件夹中创建index.js:
分模块处理，创建tab.js:
CommonHeader.vue中创建headMenu方法，点击按钮触发折叠效果（触发store中的mutations下的collapseMenu方法，从而改变state中的isCollapse值）：
CommonAside.vue中，创建计算属性isCollapse,接收store中改变的isCollapse值。并把拿到的isCollapse值传给element-ui的collapse属性（是否水平折叠收起菜单），从而实现折叠效果(兄弟组件之间传值)：
12、使用axios及mock
cnpm i axios -S
api/axios.js是对axios的二次封装。
在api/data.js中调用接口。
cnpm i mockjs -S
api/mock.js是对mock到的数据进行处理。
13、使用echarts
cnpm i echarts@5.1.2 -S
实例
基本代码分为三部分：1.引入echarts；2.为 ECharts 准备一个具备高宽的 DOM 容器；3.指定图表的配置项和数据。其核心部分就是var option那部分的图表配置代码，我们对图表的设计，包括标题（title:）、坐标轴（xAxis、yAxis）、图例以及数据（series）都在这里设置
14、封装echarts
components/Echarts.vue 折线图、柱状图和饼图存在公共部分，抽取出来，可以大大简化代码量。 折线图、柱状图主要传递xAxis{}和series[];而饼状图主要传递series[]；因此要做判断，加以区分。 并且要对原先是否存在echart数据，进行判断。如果存在，直接渲染数据；如果不存在，需要先初始化数据。
15、使用面包屑
store.js/tab.js 使用vuex中tabList存储面包屑，定义selectMenu方法并进行数据逻辑的处理。
16、封装tag组件
新建CommonTag.vue，并在其中进行数据逻辑的处理，在store.js/tab.js中， 定义closeTag方法进行删除操作。对vuex中存储数据的处理，让用户操作时，保持和面包屑同步。
17、封装form组件
新建CommonForm.vue
18、封装table组件
新建CommonTable.vue， 表格的增删改查及分页，必须掌握！ 本项目用的mock来模拟数据，并配置有增删改查的接口。
19、权限管理
登录权限： 我们给系统添加一个登录凭证叫“token”。这个token在登录的时候（登录页输入用户名和密码）通过接口请求，将用户名和密码传给后端，后端在数据库中匹配成功返回一个凭证token，前端将token缓存起来，在调用接口时传给后端验证就建立了登录权限校验。
这里缓存依赖于一个第三方库js-cookie。cnpm i js-cookie -S
store中新建文件夹user.js存储token并对token值进行处理的相关操作。
导航守卫可以对路由进行监听；
