1.安裝命令
1.安裝node.js
官網(wǎng):http://nodejs.cn/下載（長期支持版本）
終端輸入：node -v || npm -v(查看版本)
2.安裝cnpm
官網(wǎng)：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.創(chuàng)建項(xiàng)目
vue create 名稱（名稱不可大寫）
6.引入element-ui
官網(wǎng)：https://element.eleme.cn/#/zh-CN
安裝：npm i element-ui -S
全局引入（全局引入打包后會(huì)將所有打包增加項(xiàng)目體積）
image.png
按需引入（main.js中將組件解構(gòu)，分別注入：vue.use(組件)）
image.png
將 .babelrc 修改為:
image.png
7.引入vue-router
安裝：npm i vue-router@3.2.0
main.js中引入router，根目錄下面創(chuàng)建router文件夾缠借，index.js文件
image.png
image.png
router中index.js
image.png
App.vue中
image.png
8.頁面內(nèi)容
安裝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
官網(wǎng)：http://axios-js.com/
npm i axios
11.引入mock
安裝：npm i mockjs
12.引入echarts
安裝：npm i echarts@5.1.2
2.各種使用
1.使用vuex進(jìn)行父子傳遞
安裝（參考命令）
在main.js中引入
image.png
1.1創(chuàng)建文件夾---store,新建index.js及各種模塊js（tab.js）
image.png
1.2store中index.js中引入
image.png
1.3tab.js中寫需求
image.png
1.4父子傳信（此isCollapse開始為data中數(shù)據(jù)汁展，用計(jì)算屬性后data中可刪除）
image.png
1.5父子傳信 頁面加入點(diǎn)擊事件及方法
image.png
image.png
2.表格渲染
2.1data中定義表頭內(nèi)容（與表格對(duì)應(yīng)）
image.png
image.png
2.2頁面循環(huán)
image.png
3.axios及mock使用
3.1在main.js中全局引入
image.png
3.2axios二次封裝
3.2.1在項(xiàng)目中新建文件夾---api---axios.js
image.png
3.2.2新建處理axios相關(guān)配置文件---config
image.png
3.2.3config---index.js
export default {
baseUrl: {
dev: '/api/', //開發(fā)環(huán)境
pro: '' //生產(chǎn)環(huán)境
}
}
3.2.4axios中引入
import axios from 'axios'
import config from '../config'
// 判斷當(dāng)前運(yùn)行環(huán)境
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) {
// 添加請(qǐng)求攔截器
instance.interceptors.request.use(function(config) {
// 在發(fā)送請(qǐng)求之前做些什么
return config;
}, function(error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
// 添加響應(yīng)攔截器
instance.interceptors.response.use(function(response) {
console.log(response)
// 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function(error) {
console.log(error)
// 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
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同級(jí)創(chuàng)建data.js(接口請(qǐng)求存放)
import axios from './axios'
// 首頁接口
export const getData = () => {
return axios.request({
url: "/home/getData"
})
}
3.2.6mock使用锁荔，安裝（參考命令）新建mock.js
image.png
3.2.7新建一個(gè)文件存放所有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頁面調(diào)用
image.png
image.png
4.面包屑導(dǎo)航
4.1在需要的位置引入element ui面包屑組件
4.2在vuex中寫需求
image.png
4.3在左側(cè)點(diǎn)擊事件內(nèi)
image.png
4.4在面包屑頁面
image.png
image.png
4.5如果報(bào)錯(cuò)
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);
}
