最近剛換到一家新的公司上班，需要重構(gòu)我們公司的后臺(tái)管理系統(tǒng)拼弃，因?yàn)橹白约涸谏弦患夜疽灿胿ue寫(xiě)過(guò)東西略号，只是一些架構(gòu)上的東西自己還沒(méi)有完完整整的弄過(guò)，所以在做系統(tǒng)之前我也通過(guò)查找網(wǎng)上的各種資料纵菌，自己花了兩天時(shí)間搭建了一下底層架構(gòu)阐污，代碼已經(jīng)上傳到git上面去了，
https://github.com/gitEverytime/vue-axios-vuex-element-UI
一 vue-cli
安裝node 咱圆，因?yàn)関ue項(xiàng)目是運(yùn)行在node包下面的笛辟，npm指令個(gè)人推薦使用淘寶鏡像功氨，快速，穩(wěn)定
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安裝vue-cli
npm install vue-cli -g
二手幢、接口重定向配置文件：
'/performance/**': {
target: 'http://ip/域名:端口號(hào)', // 你接口的域名
secure: false, // 如果是https接口捷凄，需要配置這個(gè)參數(shù)
changeOrigin: true, // 如果接口跨域，需要進(jìn)行這個(gè)參數(shù)配置
},
三围来、前后交互工具Axios配置：
安裝：npm install axios --save
攔截器配置（是否登錄驗(yàn)證,驗(yàn)證token是否過(guò)期）
axios.interceptors.request.use(config => {
if (vm.cookie.get("token")) { // 判斷是否存在token跺涤，如果存在的話(huà)，則每個(gè)``http header都加上token,username
let jsonData = {
token: vm.cookie.get("token"),
username: vm.cookie.get("username")
};
config.headers.Authorization = JSON.stringify(jsonData);
}
return config
}, error => {
return Promise.reject(error)
})
接口統(tǒng)一放在api.js里面
export default {
right: '地址', // 正確路徑
}
接口調(diào)用：
函數(shù)名: async function() {
let vm=this;
let params = {};
const res = await vm.http.get(地址名稱(chēng).adminList, params);
if( res && res.data && res.data.code === 200){//成功處理
}
},
四监透、vue-router:vue地址路徑路由
安裝：npm install vue-router
基本配置的話(huà)照著官方文檔大家基本都會(huì)配置桶错，api也相對(duì)簡(jiǎn)單易懂，細(xì)節(jié)配置的話(huà)注意我們可以利用全局導(dǎo)航鉤子做登錄驗(yàn)證的判斷胀蛮，未登錄牛曹，則直接路由登錄界面的地址，登錄成功才去其他頁(yè)面
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) {
if(cookieUtil.get("token")) {
next();
}
else {
next({
path: '/login'
})
}
}
else {
next();
}
})
五醇滥、vuex
Vuex是一個(gè)專(zhuān)為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式黎比。
安裝: npm install vuex --save
關(guān)于vuex教程詳解網(wǎng)上一大堆，不再啰嗦鸳玩。阅虫。。（懶????）
五不跟，我們知道使用vue就是利用它的組件化應(yīng)用颓帝，讓我們的開(kāi)發(fā)效率大大提高，在做項(xiàng)目重構(gòu)之前我就對(duì)各個(gè)開(kāi)源組件庫(kù)的生態(tài)社區(qū)以及組件的美觀(guān)進(jìn)行了詳細(xì)比對(duì)窝革，選用了element組件庫(kù)作為項(xiàng)目的開(kāi)發(fā)购城，elment組件庫(kù)可以自定義主題顏色，每個(gè)組件的api都很友好虐译，大家只要細(xì)心看官方文檔瘪板，在用組件的過(guò)程遇到的問(wèn)題其實(shí)很多都是沒(méi)有仔細(xì)看文檔，
比如日期組件：很多初次使用沒(méi)看清文檔就發(fā)現(xiàn)v-model里面的value并不是我們想要的YYYY-MM-dd這種格式漆诽，而是澳大利亞西部標(biāo)準(zhǔn)時(shí)間侮攀，看文檔才發(fā)現(xiàn)組件@change事件可以提供格式化后的值；然后你發(fā)現(xiàn)2.x之后change返回的值是澳大利亞西部標(biāo)準(zhǔn)時(shí)間厢拭，??兰英，原來(lái)文檔api新增了屬性
value-format 可選，綁定值的格式供鸠。不指定則綁定值為 Date 對(duì)象,后面的屬性值可指定YYYY-MM-dd
六畦贸、關(guān)于公共js代碼封裝
在main.js文件配置里面，import你的js文件
vue.prototype.js文件名 = 引入文件名
就是給vue這個(gè)函數(shù)的原型對(duì)象添加新的屬性和屬性值
七楞捂、node線(xiàn)上服務(wù)端配置
安裝express node web服務(wù)框架：npm install express --save
pm2：node進(jìn)程管理器 :npm install pm2 --save
webpack-hot-middleware:npm install webpack-hot-middleware --save
//線(xiàn)上啟動(dòng)web服務(wù)器配置
var express = require("express");
var proxy = require('http-proxy-middleware');
var app = express();
app.use(express.static("dist")).listen(端口號(hào));
// Add middleware for http proxying
var apiProxy = proxy('/user', {
target: '域名/ip',
changeOrigin: ``true
});
app.use('/user/*', apiProxy);
