一、安装Vue Cil (脚手架)
- 需要先安装node.js,这是node官网地址： https://nodejs.org/en/download/ ，node有两种版本一种是稳定版一种开发版
- 安装完成输入
node -v查看版本也检查是否安装成功，npm-v查看版本确定安装完成，（安装node时会自动安装npm）- 接下来安装Vue Cil,
1）yarn安装
全局安装yarn最新版本：
npm install -g yarn查看是否成功and版本：
yarn -v注意事项：安装不成功，可能是npm版本问题，可以根据提示升级一下版本
2）用yarn安装脚手架Vue-Cil
网址：https://cli.vuejs.org/guide/installation.html
代码：
yarn global add @vue/cli查看vuecil版本：
vue --version创建项目：vue create 项目名比如：（ vue create hello-world ）
运行项目，我这里用的
yarn serve，运行成功，出现页面，表示Cil项目创建成功
二、使用UI框架 Element | 官网地址：https://element.eleme.io/#/zh-CN/component/installation
- 全局引入
1.安装element 依赖
npm i element-ui -S，将依赖下载到node_modules中2.安装完成后引入到入口文件
main.js中，然后用组件就可以了
- 按需引入
1.安装依赖：
npm install babel-plugin-component -D2.优势：打包的时候，减小项目的体积，用到什么组件就使用那个。
运行项目报错：
三、Vue-router | 官方地址： https://router.vuejs.org/zh/guide/
说明：npm官网下载指定版本，跟上一个@，npm install vue-router@3.1.1
1.vue-router版本查看，网址：
https://www.npmjs.com/,或者在百度搜索npm官网，点进去搜索vue-router，点进去第一个，右上角Versions，既是版本号
2.引入路由依赖，
1）创建路由组件
2）将路由与组件进行映射
3）在入口文件中挂载router
4）eslint 语法检测工具,在
vue.config.js中关闭lint,命令：lintOnSave:false，关闭eslint校验5）在App.vue中，路由匹配到的组件将渲染在这里，
<router-view></router-view>3.路由嵌套
1）创建主路由文件，Main.vue,这里面也需要一个
<router-view></router-view>,在App.vue中的，是顶层 的，而在Main.vue中的，是将children中的组件渲染到这个嵌套的中。
四、引入less解析器
官网地址：https://less.bootcss.com/
1.引入依赖：
npm install -g less，指定版本npm install -g less@4.1.2+less-loader@6.0.0/npm install -g less@4.1.2 less-loader@6.0.01）less-loader是less的解析器,oader其实也就是对应不同代码或是文件类型的加载器，其作用是对这部分进行识别和转化处理，例如把less转化为css，但是其本身并没有转化的功能，还是需要less才能进行转化
2）在
<style lang="less" scope>加入 lang="less" ,scoped 只在本页面使用
五、路由跳转
1.给页面绑定点击事件，
@click="menuClick(item)
menuClick(item) {
console.log(item);
this.$router.push(item.path);
}2.重定向：
redirect: '/home'1）含义：在router下的index.js配置路由时，有时候，配置不同的路由，但是，希望跳转到同一个页面，这个时候就需要使用redirect进行重定向，这样，就可以跳转到同一个页面。
3.
this.$route是当前具体路由，this.$router是整个路由实例1）
this.$router 是用来操作路由的 this.$route 是用来获取路由信息的2）this.$route: 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, meta, params, query 等属性。
3）this.$router： 表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法；
六、Vuex
官网地址：https://vuex.vuejs.org/zh/guide/
1.介绍
1）State：所有状态写在这里面
2）Getters：vuex里面的计算属性，跟vue计算属性有类似，根据State变化，重新进行计算
3）Mutations：修改State的方法，想要修改State唯一选择就是去Mutations里面修改，同步处理
4）Action：异步处理
5）Modules：模块化
2.安装依赖：指定版本：
npm i vuex@3.6.2
七、axios
官网地址：http://axios-js.com/zh-cn/docs/
1.安装依赖：
npm i axios
八、mockjs
官网：https://github.com/nuysoft/Mock
1.依赖：
npm i mockjs2.说明; mock是前端模拟后端接口的一个工具
九、echarts
官网：https://echarts.apache.org/zh/index.html
1.依赖：
npm i echarts@5.1.2@安装指定版本，5.1.2是版本号
