1.安装命令

1.安装node.js

官网:http://nodejs.cn/下载（长期支持版本）
终端输入：node -v || npm -v(查看版本)

2.安装cnpm

官网：https://npmmirror.com/
安装：npm install -g cnpm --registry=https://registry.npmmirror.com

3.安装yarn

npm install -g yarn

4.安装vue-cli

cnpm install -g @vue-cli

5.创建项目

vue create 名称（名称不可大写）

6.引入element-ui

官网：https://element.eleme.cn/#/zh-CN
安装：npm i element-ui -S
全局引入（全局引入打包后会将所有打包增加项目体积）

image.png

image.png

image.png

7.引入vue-router

安装：npm i vue-router@3.2.0
main.js中引入router，根目录下面创建router文件夹，index.js文件

image.png

image.png

router中index.js

image.png

App.vue中

image.png

8.页面内容

安装less：npm i less
npm i less-loader@5.0.0

9.安装vuex(vue2.0只能安装vuex3.x版本,最高3.6.2,vue3.0才能装vuex4.x版本)

npm i vuex

10.安装axios

官网：http://axios-js.com/
npm i axios

11.引入mock

安装：npm i mockjs

12.引入echarts

安装：npm i echarts@5.1.2

2.各种使用

1.使用vuex进行父子传递

安装（参考命令）

在main.js中引入

image.png

1.1创建文件夹---store,新建index.js及各种模块js（tab.js）

image.png

1.2store中index.js中引入

image.png

1.3tab.js中写需求

image.png

1.4父子传信（此isCollapse开始为data中数据，用计算属性后data中可删除）

image.png

1.5父子传信 页面加入点击事件及方法

image.png

image.png

2.表格渲染

2.1data中定义表头内容（与表格对应）

image.png

image.png

2.2页面循环

image.png

3.axios及mock使用

3.1在main.js中全局引入

image.png

3.2axios二次封装

3.2.1在项目中新建文件夹---api---axios.js

image.png

3.2.2新建处理axios相关配置文件---config

image.png

3.2.3config---index.js

export default {
 baseUrl: {
     dev: '/api/', //开发环境
     pro: '' //生产环境
 }
}

3.2.4axios中引入

import axios from 'axios'
import config from '../config'
     // 判断当前运行环境
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro
       // axios工具类
class HttpRequest {
   constructor(baseUrl) {
       // 初始化
       this.baseUrl = baseUrl
   }
   getInsideConfig() {
           const config = {
               baseUrl: this.baseUrl,
               header: {}
           }
           return config
       }
       // 拦截器
   interceptors(instance) {
       // 添加请求拦截器
       instance.interceptors.request.use(function(config) {
           // 在发送请求之前做些什么
           return config;
       }, function(error) {
           // 对请求错误做些什么
           return Promise.reject(error);
       });

       // 添加响应拦截器
       instance.interceptors.response.use(function(response) {
           console.log(response)
               // 对响应数据做点什么
           return response;
       }, function(error) {
           console.log(error)
               // 对响应错误做点什么
           return Promise.reject(error);
       });
   }
   request(options) {
       const instance = axios.create()
       options = {...this.getInsideConfig(), ...options }
       this.interceptors(instance)
       return instance(options)
   }
}
export default new HttpRequest(baseUrl)

3.2.5axios同级创建data.js(接口请求存放)

import axios from './axios'
      // 首页接口
export const getData = () => {
    return axios.request({
        url: "/home/getData"
    })
}

3.2.6mock使用，安装（参考命令）新建mock.js

image.png

3.2.7新建一个文件存放所有mock---mockServeData

image.png

3.2.8mock.js中

import mock from 'mockjs'
import homeApi from './mockServeData/home'


mock.mock('/home/getData', homeApi.getStatisticalData)

3.2.9mian.js中引入

image.png

3.2.10home页面调用

image.png

image.png

4.面包屑导航

4.1在需要的位置引入element ui面包屑组件

4.2在vuex中写需求

image.png

4.3在左侧点击事件内

image.png

4.4在面包屑页面

image.png

image.png

4.5如果报错

image.png

在router中index.js中加入

// 解决：Uncaught (in promise) NavigationDuplicated; 
let originalPush = VueRouter.prototype.push; // 先保存一份 VueRouter.prototype.push方法
let originalRepace = VueRouter.prototype.replace;

VueRouter.prototype.push = function push(location) {
    // call(); 篡改上下文    catch(); 捕获异常 **** 
    return originalPush.call(this, location).catch(e => e);
}
VueRouter.prototype.replace = function replace(location) {
    return originalRepace.call(this, location).catch(e => e);
}