完整專案地址：vue-element-admin
系列文章：
- 手摸手，帶你用vue擼後臺 系列一（基礎篇）
- 手摸手，帶你用vue擼後臺 系列二(登入許可權篇)
- 手摸手，帶你用vue擼後臺 系列三 (實戰篇)
- 手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
- 手摸手，帶你封裝一個vue component
- 手摸手，帶你優雅的使用 icon
- 手摸手，帶你用合理的姿勢使用webpack4（上）
- 手摸手，帶你用合理的姿勢使用webpack4（下）
前言
做這個 vueAdmin-template 的主要原因是: vue-element-admin 這個專案的初衷是一個 vue 的管理後臺整合方案，把平時用到的一些元件或者經驗分享給大家，同時它也在不斷的維護和擴充中，比如最近重構了dashboard，加入了全屏功能，新增了 tabs-view 等等。所以專案會越來越複雜，不太適合很多初用 vue 的同學來構建後臺。所以就寫了這個基礎模板，它沒有複雜的功能，只包含了一個後臺需要最基礎的東西。 vueAdmin-template 主要是基於vue-cli webpack模板為基礎開發的，引入瞭如下dependencies:
- element-ui 餓了麼出品的vue2.0 pc UI框架
- axios 一個現在主流並且很好用的請求庫 支援Promise
- js-cookie 一個輕量的JavaScript庫來處理cookie
- normalize.css 格式化css
- nprogress 輕量的全域性進度條控制
- vuex 官方狀態管理
- vue-router 官方路由
該專案只做了一個管理後臺需要極簡的功能，封裝了axios請求，支援無限層級路由，動態許可權和動態側邊欄。 如果需要更多複雜的功能可以參考 vue-element-admin，若還有不足，歡迎提issue或者pr。下文會簡單說一下用該模板需要注意的地方。
路由懶載入
路由懶載入應該是寫大一點的專案都會用的一個功能，只有在使用這個component的時候才會載入這個相應的元件，這樣寫大大減少了初始頁面 js 的大小並且能更好的利用遊覽器的快取。
const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');
複製程式碼在懶載入頁面不多的情況下一切是那麼的美好，但我司後臺業務在不斷地迭代，現在專案近百個路由，這時候使用路由懶載入在開發模式下就是一件痛苦的事情了，隨手改一行程式碼熱更新都是要6000ms+的，這怎麼能忍。樓主整整花了一天多的時間找原因，能webpack優化的方法都用了,什麼 dll, HappyPack 等方法都是過了，但提升的效果都不是很明顯，正好那段時間出了 webpack3 樓主也升級了，編譯速度也得到了很大幅度的提升，不過也要2000ms+。後來經過大神 @jzlxiaohei 的指點發現原來是路由懶載入搞得鬼，樓主猜測可能是非同步載入導致 webpack 每次的 cache 失效了，所以每次的rebuild 才會這麼的慢。找到了原因我們就可以對症下藥了，我們就自己封裝了一個_import()的方法，只有在正式環境下才使用懶載入。這樣解決了困擾多事的rebuild慢問題。程式碼
const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');
複製程式碼
許可權 控制
在手摸手，帶你用vue擼後臺 系列二(登入許可權篇)這章中其實已經詳細介紹過了。該專案中許可權的實現方式是：通過獲取當前使用者的許可權去比對路由表，生成當前使用者具的許可權可訪問的路由表，通過router.addRoutes動態掛載到router上。
但其實很多公司的業務邏輯可能不是這樣的，舉一個例子來說，很多公司的需求是每個頁面的許可權是動態配置的，不像本專案中是寫死預設的。但其實原理是相同的。如這個例子，你可以在後臺通過一個tree控制元件或者其它展現形式給每一個頁面動態配置許可權，之後將這份路由表儲存到後端。當使用者登入後根據role，後端返回一個相應的路由表或者前端去請求之前儲存的路由表動態生成可訪問頁面，之後就是router.addRoutes動態掛載到router上，你會發現原來是相同的，萬變不離其宗。
導航
側邊欄:本專案裡的側邊欄是根據 router.js 配置的路由並且根據許可權動態生成的，這樣就省去了寫一遍路由還要再手動寫側邊欄這種麻煩事，同是使用了遞迴元件，這樣不管你路由多少級巢狀，都能愉快的顯示了。許可權驗證那裡也做了遞迴的處理。
麵包屑:本專案中也封裝了一個麵包屑導航，它也是通過watch $route動態生成的。程式碼
- icon : the icon show in the sidebar
-
hidden : if
hidden:truewill not show in the sidebar -
redirect : if
redirect:noredirectwill not redirct in the levelbar -
noDropdown : if
noDropdown:truewill not has submenu in the sidebar -
meta :
{ role: ['admin'] }will control the page role大家也可以結合自己的業務需求增改這些自定義屬性。
iconfont
element-ui自帶的圖示不是很豐富，但管理後臺圖示的定製性又很強。這裡只給大家推薦使用阿里的 iconfont ，簡單好用又方便管理。本專案中已經嵌入了一些 iconfont 作為例子，大家可以自行替換。 這裡來簡單介紹一下 iconfont 的使用方式。首先註冊好 iconfont 賬號之後，可以在我的專案中管理自己的 iconfont 。我司所有的專案都是用這個管理的，真心推薦使用。
unicode，font-class的引入方式，有興趣的可以自行研究。
之後我們點選下載 Symbol，會發現有如下這些檔案，我們只要關心iconfont.js就可以了
<icon-svg icon-class="填入你需要的iconfont名字就能使用了"></icon-svg>
複製程式碼favicon
每個專案都需要有一個屬於自己的favicon。
//webpack config
function resolveApp(relativePath) {
return path.resolve(relativePath);
}
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
favicon: resolveApp('favicon.ico')
}),
複製程式碼你只要將本專案跟目錄下的favicon.ico檔案替換為你想要的圖示即可。
eslint
vue cli 預設提供了standard和airbnb 兩種 lint 規範，說真的一個j檢查校驗的太鬆一個又太緊，而且每個團隊的 lint 規範又是不同的，所以樓主幹脆在專案裡把大部分常用的 lint 規範都列舉了出來並寫上了註釋方便大家修改程式碼地址，大家也可以把自己的規範上傳到npm，像 vue 一樣 vue-eslint-config。配置 eslint 對多人協作的專案有很大的好處,同時配置好lint 在加 ide 的 lint 外掛寫程式碼簡直要起飛。相關配置可見第一篇教程。
postcss
相信大部分 vue 的專案都是基於 vue-cli 來開發的，不過畢竟每個人需求都是不太一樣的，需要自定義一些的東西。就比如拿 postcss 來說 vue-cli 有一個小坑，它預設 autoprefixer 只會對通過 vue-loader 引入的樣式有作用，換而言之也就是 .vue 檔案裡面的 css autoprefixer 才會效果。相關問題issues/544,issues/600。解決方案也很簡單粗暴
//app.vue
<style lang="scss">
@import './styles/index.scss'; // 全域性自定義的css樣式
</style>
複製程式碼你在 .vue 檔案中引入你要的樣式就可以了，或者你可以改變 vue-cli的檔案在 css-loader 前面在加一個 postcss-loader，在前面的issue地址中已經給出瞭解決方案。
這裡再來說一下 postcss 的配置問題，新版的vue-cli webpack 模板 inti 之後跟目錄下預設有一個.postcssrc.js 。vue-loader 的 postcss 會預設讀取這個檔案的裡的配置項，所以在這裡直接改配置檔案就可以了。配置和postcss是一樣的。
//.postcssrc.js
module.exports = {
"plugins": {
// to edit target browsers: use "browserlist" field in package.json
"autoprefixer": {}
}
}
//package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
複製程式碼如上程式碼所述，autoprefixe r回去讀取 package.json 下 browserslist的配置檔案
> 1%相容全球使用率大於1%的遊覽器last 2 versions相容每個遊覽器的最近兩個版本not ie <= 8不相容ie8及以下 具體可見 browserslist, postcss也還有很多很多其它的功能大家可以自行去把玩
babel-polyfill
本專案暫時沒有相容性需求，如有相容性需求可自行使用babel-polyfill。 在Node/Browserify/webpack中使用
npm install --save babel-polyfill //下載依賴
複製程式碼在入口檔案中引入
import 'babel-polyfill';
// 或者
require('babel-polyfill');//es6
複製程式碼在webpack.config.js中加入babel-polyfill到你的入口陣列：
module.exports = {
entry:["babel-polyfill","./app/js"]
}
複製程式碼具體可參考 link
或者更簡單暴力 polyfill.io 使用它給的一個 cdn 地址，引入這段js之後它會自動判斷遊覽器，載入缺少的那部分 polyfill，但國內速度肯能不行，大家可以自己搭 cdn。
跨域問題
樓主 vue 群裡的小夥伴們問的最多的問題還是關於跨域的，其實跨域問題真的不是一個很難解決的問題。這裡我來簡單總結一下我推薦的幾種跨域解決方案。
- 我最推薦的也是我司常用的方式就是**
cors**全稱為 Cross Origin Resource Sharing（跨域資源共享）。這玩意對應前端來說和平時發請求寫法上沒有任何區別，工作量基本都在後端這裡。每一次請求瀏覽器必須先以 OPTIONS 請求方式傳送一個預請求，從而獲知伺服器端對跨源請求所支援 HTTP 方法。在確認伺服器允許該跨源請求的情況下，以實際的 HTTP 請求方法傳送那個真正的請求。推薦的原因是隻要第一次配好了，之後不管有多少介面和專案複用就可以了，一勞永逸的解決了跨域問題，而且不管是開發環境還是測試環境都能方便的使用。 - 但總有後端覺得麻煩不想這麼搞。那前端也是有解決方案的，在
dev 開發模式下可以下使用**
webpack 的 proxy使用也是很方便的看一下文件就會使用了，樓主一些個人專案使用的該方法。但這種方法在生成環境是不適用的。在生產環境中需要使 用Nginx反向代理** 不管是 proxy 和 nginx 的原理都是一樣的通過搭建一箇中轉伺服器來轉發請求規避跨域的問題。
| 開發環境 | 生成環境 |
|---|---|
| cors | cors |
| proxy | nginx |
這裡我只推薦這兩種方式跨域，其它的跨域方式都很多，但真心主流的也就這兩種方式。
easy-mock
vue-element-admin 由於是一個純前端個人專案,所以所以的資料都是用mockjs生成的,它的原理是:攔截了所有的請求並代理到本地模擬資料，所以 network 中沒有任何的請求發出。不過這並不符合實際業務開發中的場景，所以這個專案中使用了前不久剛出的 easy-mock，支援跨域，mockjs 的語法，支援Swagger 這幾點還是挺不錯的。相關文章
baseurl
線上或者測試環境介面的 base_url 不一樣是很長見得需求，或者你在本地用瞭如 easy-mock 這種模擬資料到線上環境你想用自己公司生產環境的資料，這些需求都可以簡單的通過用 baseurl 來解決。首先我們在config/下有dev.env.js和prod.env.js這兩個配置檔案。用它來區分不同環境的配置引數。
//dev.env.js
module.exports = {
NODE_ENV: '"development"',
BASE_API: '"https://easy-mock.com/mock/5950a2419adc231f356a6636/vue-admin"',
}
//prod.env.js
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"https://prod-xxx"',
}
複製程式碼同時本專案封裝了axios攔截器，方便大家使用，大家也可根據自己的業務自行修改。
import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';
// 建立axios例項
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url 讀取config配置檔案
timeout: 5000 // 請求超時時間
});
// request攔截器
service.interceptors.request.use(config => {
if (store.getters.token) {
config.headers['X-Token'] = store.getters.token; // 讓每個請求攜帶自定義token 請根據實際情況自行修改
}
return config;
}, error => {
// Do something with request error
console.log(error); // for debug
Promise.reject(error);
})
// respone攔截器
service.interceptors.response.use(
response => {
/**
* code為非20000是拋錯 可結合自己業務進行修改
*/
const res = response.data;
if (res.code !== 20000) {
Message({
message: res.data,
type: 'error',
duration: 5 * 1000
});
// 50008:非法的token; 50012:其他客戶端登入了; 50014:Token 過期了;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
MessageBox.confirm('你已被登出，可以取消繼續留在該頁面，或者重新登入', '確定登出', {
confirmButtonText: '重新登入',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload();// 為了重新例項化vue-router物件 避免bug
});
})
}
return Promise.reject(error);
} else {
return response.data;
}
},
error => {
console.log('err' + error);// for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
});
return Promise.reject(error);
}
)
export default service;
複製程式碼由於axios每一個都是一個例項，你的請求都是基於這個例項來的，所以所以配置的引數屬性都繼承了下來.
//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
return fetch({
url: '/user/info',
method: 'get',
params: { token }
});
}
//你可以直接這樣使用，之前攔截器寫的東西都是生效的，
//它自動會有一個你之前配置的baseURL,
//但你說我這個請求baseURL和其它的不同,
//這也是很方便的，你可以字請求內部修改，
//它會自動覆蓋你在建立例項時候寫的引數如
export function getInfo(token) {
return fetch({
baseURL: https://api2-xxxx.com
url: '/user/info',
method: 'get',
params: { token }
});
}
複製程式碼總結
這篇文章主要是介紹了 vueAdmin 做了哪些事情，希望大家如果有後臺新專案要開發，建議基於 vue-admin-template 來開發，而 vue-element-admin 更多的是用來當做一個整合方案，你要什麼功能就去裡面找拿來用，因為兩者的基礎架構是一樣的，所以複用成本也很低。
佔坑
常規佔坑，這裡是手摸手，帶你用vue擼後臺系列。
完整專案地址：vue-element-admin
系類文章一：手摸手，帶你用vue擼後臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼後臺 系列二(登入許可權篇)
系類文章三：手摸手，帶你用vue 擼後臺 系列三 (實戰篇)
系類文章四：手摸手，帶你用vue擼後臺 系列四(vueAdmin 一個極簡的後臺基礎模板)
系類文章：手摸手，帶你優雅的使用 icon
系類文章：手摸手，帶你封裝一個vue component
樓主個人免費圈子