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
按需引入（main.js中将组件解构，分别注入：vue.use(组件)）
image.png
将 .babelrc 修改为:
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);
}
