項目地址：vueAdmin-template
線上預覽地址：點我
相關項目地址：vue-element-admin
系類文章一：手摸手隘梨，帶你用vue擼后臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）
系類文章三：手摸手嘴瓤，帶你用vue擼后臺 系列三(實戰(zhàn)篇）

前言

做這個 vueAdmin-template 的主要原因是: vue-element-admin 這個項目的初衷是一個vue的管理后臺集成方案扫外，把平時用到的一些組件或者經(jīng)驗分享給大家莉钙，同時它也在不斷的維護和拓展中，比如最近重構了dashboard筛谚，加入了全屏功能磁玉，新增了tabs-view等等。所以項目會越來越復雜驾讲，不太適合很多初用vue的同學來構建后臺蚊伞。所以就寫了這個基礎模板，它沒有復雜的功能吮铭，只包含了一個后臺需要最基礎的東西时迫。
vueAdmin-template 主要是基于vue-cli webpack模板為基礎開發(fā)的，引入了如下dependencies:

• element-ui 餓了么出品的vue2.0 pc UI框架
• axios 一個現(xiàn)在主流并且很好用的請求庫 支持Promise
• js-cookie 一個輕量的JavaScript庫來處理cookie
• normalize.css 格式化css
• nprogress 輕量的全局進度條控制
• vuex 官方狀態(tài)管理
• vue-router 官方路由

該項目只做了一個管理后臺需要極簡的功能谓晌，封裝了axios請求掠拳，支持無限層級路由，動態(tài)權限和動態(tài)側邊欄纸肉。
如果需要更多復雜的功能可以參考 vue-element-admin溺欧，若還有不足，歡迎提issue或者pr柏肪。下文會簡單說一下用該模板需要注意的地方姐刁。

路由懶加載

路由懶加載應該是寫大一點的項目都會用的一個功能，只有在使用這個component的時候才會加載這個相應的組件烦味，這樣寫大大減少了初始頁面 js 的大小并且能更好的利用游覽器的緩存聂使。

const Foo = resolve => require(['./Foo.vue'], resolve)
//或者
const Foo = () => import('./Foo');

在懶加載頁面不多的情況下一切是那么的美好，但我司后臺業(yè)務在不斷地迭代谬俄，現(xiàn)在項目近百個路由岩遗，這時候使用路由懶加載在開發(fā)模式下就是一件痛苦的事情了，隨手改一行代碼熱更新都是要6000ms+的凤瘦，這怎么能忍宿礁。樓主整整花了一天多的時間找原因，能webpack優(yōu)化的方法都用了,什么 dll, HappyPack 等方法都是過了蔬芥，但提升的效果都不是很明顯梆靖，正好那段時間出了 webpack3 樓主也升級了，編譯速度也得到了很大幅度的提升笔诵，不過也要2000ms+返吻。經(jīng)過不斷查找發(fā)現(xiàn)原來是路由懶加載搞得鬼，樓主猜測可能是異步加載導致 webpack 每次的 cache 失效了乎婿，所以每次的rebuild 才會這么的慢测僵。找到了原因我們就可以對癥下藥了，我們就自己封裝了一個_import()的方法，只有在正式環(huán)境下才使用懶加載捍靠。這樣解決了困擾多事的rebuild慢問題沐旨。代碼

const _import = require('./_import_' + process.env.NODE_ENV);
const Foo = _import('Foo');

整整比原來6000ms快了十多倍，我終于又能愉快的開發(fā)了榨婆。

權限 控制

在手摸手磁携，帶你用vue擼后臺 系列二(登錄權限篇)這章中其實已經(jīng)詳細介紹過了。該項目中權限的實現(xiàn)方式是：通過獲取當前用戶的權限去比對路由表良风，生成當前用戶具的權限可訪問的路由表谊迄，通過router.addRoutes動態(tài)掛載到router上。
但其實很多公司的業(yè)務邏輯可能不是這樣的烟央，舉一個例子來說统诺，很多公司的需求是每個頁面的權限是動態(tài)配置的，不像本項目中是寫死預設的疑俭。但其實原理是相同的篙议。如這個例子，你可以在后臺通過一個tree控件或者其它展現(xiàn)形式給每一個頁面動態(tài)配置權限怠硼，之后將這份路由表存儲到后端。當用戶登錄后根據(jù)role移怯，后端返回一個相應的路由表或者前端去請求之前存儲的路由表動態(tài)生成可訪問頁面香璃，之后就是router.addRoutes動態(tài)掛載到router上，你會發(fā)現(xiàn)原來是相同的舟误，萬變不離其宗葡秒。

導航

側邊欄:本項目里的側邊欄是根據(jù) router.js 配置的路由并且根據(jù)權限動態(tài)生成的，這樣就省去了寫一遍路由還要再手動寫側邊欄這種麻煩事嵌溢，同是使用了遞歸組件眯牧，這樣不管你路由多少級嵌套，都能愉快的顯示了赖草。權限驗證那里也做了遞歸的處理学少。

面包屑:本項目中也封裝了一個面包屑導航，它也是通過watch $route動態(tài)生成的秧骑。代碼

由于側邊欄導航和面包屑亦或是權限版确，你會發(fā)現(xiàn)其實都是和router密切相關的，所以基于vue-router路由信息對象上做了一下小小的拓展乎折，自定義了一些屬性

• icon : the icon show in the sidebar

• hidden : if hidden:true will not show in the sidebar
• redirect : if redirect:noredirect will not redirct in the levelbar
• noDropdown : if noDropdown:true will not has submenu in the sidebar
• meta : { role: ['admin'] } will control the page role

大家也可以結合自己的業(yè)務需求增改這些自定義屬性绒疗。

iconfont

element-ui自帶的圖標不是很豐富，但管理后臺圖標的定制性又很強骂澄。這里只給大家推薦使用阿里的 iconfont 吓蘑，簡單好用又方便管理。本項目中已經(jīng)嵌入了一些 iconfont 作為例子坟冲，大家可以自行替換磨镶。
這里來簡單介紹一下 iconfont 的使用方式溃蔫。首先注冊好 iconfont 賬號之后，可以在我的項目中管理自己的 iconfont 棋嘲。我司所有的項目都是用這個管理的酒唉，真心推薦使用。

    <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 規(guī)范会放，說真的一個j檢查校驗的太松一個又太緊饲齐，而且每個團隊的 lint 規(guī)范又是不同的，所以樓主干脆在項目里把大部分常用的 lint 規(guī)范都列舉了出來并寫上了注釋方便大家修改代碼地址咧最，大家也可以把自己的規(guī)范上傳到npm捂人，像 vue 一樣 vue-eslint-config。配置 eslint 對多人協(xié)作的項目有很大的好處,同時配置好lint 在加 ide 的 lint 插件寫代碼簡直要起飛矢沿。相關配置可見第一篇教程滥搭。

postcss

相信大部分 vue 的項目都是基于 vue-cli 來開發(fā)的，不過畢竟每個人需求都是不太一樣的捣鲸，需要自定義一些的東西瑟匆。就比如拿 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地址中已經(jīng)給出了解決方案。
這里再來說一下 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到你的入口數(shù)組：

module.exports = {
    entry:["babel-polyfill","./app/js"]
}

具體可參考 link

或者更簡單暴力 polyfill.io 使用它給的一個 cdn 地址玖像，引入這段js之后它會自動判斷游覽器，加載缺少的那部分 polyfill齐饮，但國內(nèi)速度肯能不行捐寥，大家可以自己搭 cdn。

跨域問題

樓主 vue 群里的小伙伴們問的最多的問題還是關于跨域的祖驱，其實跨域問題真的不是一個很難解決的問題握恳。這里我來簡單總結一下我推薦的幾種跨域解決方案。

• 我最推薦的也是我司常用的方式就是cors全稱為 Cross Origin Resource Sharing（跨域資源共享）捺僻。這玩意對應前端來說和平時發(fā)請求寫法上沒有任何區(qū)別乡洼，工作量基本都在后端這里。每一次請求瀏覽器必須先以 OPTIONS 請求方式發(fā)送一個預請求匕坯，從而獲知服務器端對跨源請求所支持 HTTP 方法束昵。在確認服務器允許該跨源請求的情況下，以實際的 HTTP 請求方法發(fā)送那個真正的請求葛峻。推薦的原因是只要第一次配好了锹雏，之后不管有多少接口和項目復用就可以了，一勞永逸的解決了跨域問題泞歉，而且不管是開發(fā)環(huán)境還是測試環(huán)境都能方便的使用。
• 但總有后端覺得麻煩不想這么搞匿辩。那前端也是有解決方案的腰耙，在
  dev 開發(fā)模式下可以下使用webpack 的 proxy使用也是很方便的看一下文檔就會使用了，樓主一些個人項目使用的該方法铲球。但這種方法在生成環(huán)境是不適用的挺庞。在生產(chǎn)環(huán)境中需要使 用Nginx反向代理 不管是 proxy 和 nginx 的原理都是一樣的通過搭建一個中轉(zhuǎn)服務器來轉(zhuǎn)發(fā)請求規(guī)避跨域的問題。

這里我只推薦這兩種方式跨域稼病，其它的跨域方式都很多选侨，但真心主流的也就這兩種方式。

easy-mock

vue-element-admin 由于是一個純前端個人項目,所以所以的數(shù)據(jù)都是用mockjs生成的,它的原理是:攔截了所有的請求并代理到本地模擬數(shù)據(jù)然走，所以 network 中沒有任何的請求發(fā)出援制。不過這并不符合實際業(yè)務開發(fā)中的場景，所以這個項目中使用了前不久剛出的 easy-mock芍瑞，支持跨域晨仑，mockjs 的語法，支持Swagger 這幾點還是挺不錯的。相關文章

baseurl

線上或者測試環(huán)境接口的 base_url 不一樣是很長見得需求洪己，或者你在本地用了如 easy-mock 這種模擬數(shù)據(jù)到線上環(huán)境你想用自己公司生產(chǎn)環(huán)境的數(shù)據(jù)妥凳，這些需求都可以簡單的通過用 baseurl 來解決。首先我們在config/下有dev.env.js和prod.env.js這兩個配置文件答捕。用它來區(qū)分不同環(huán)境的配置參數(shù)逝钥。

//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攔截器，方便大家使用拱镐，大家也可根據(jù)自己的業(yè)務自行修改艘款。

import axios from 'axios';
import { Message } from 'element-ui';
import store from '../store';

// 創(chuàng)建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 請根據(jù)實際情況自行修改
  }
  return config;
}, error => {
  // Do something with request error
  console.log(error); // for debug
  Promise.reject(error);
})

// respone攔截器
service.interceptors.response.use(
  response => {
  /**
  * code為非20000是拋錯 可結合自己業(yè)務進行修改
  */
    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('你已被登出，可以取消繼續(xù)留在該頁面痢站，或者重新登錄', '確定登出', {
          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每一個都是一個實例磷箕，你的請求都是基于這個實例來的，所以所以配置的參數(shù)屬性都繼承了下來.

//api.xxx.js
import fetch from '@/utils/fetch';
export function getInfo(token) {
  return fetch({
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}
//你可以直接這樣使用阵难，之前攔截器寫的東西都是生效的岳枷，
//它自動會有一個你之前配置的baseURL,
//但你說我這個請求baseURL和其它的不同,
//這也是很方便的，你可以字請求內(nèi)部修改呜叫，
//它會自動覆蓋你在創(chuàng)建實例時候?qū)懙膮?shù)如
export function getInfo(token) {
  return fetch({
    baseURL: https://api2-xxxx.com
    url: '/user/info',
    method: 'get',
    params: { token }
  });
}

總結

這篇文章主要是介紹了 vueAdmin 做了哪些事情空繁，希望大家如果有后臺新項目要開發(fā)，建議基于 vueAdmin-template 來開發(fā)朱庆，而 vue-element-admin 更多的是用來當做一個集成方案盛泡，你要什么功能就去里面找拿來用，因為兩者的基礎架構是一樣的娱颊，所以復用成本也很低傲诵。

占坑

常規(guī)占坑，這里是手摸手箱硕，帶你用vue擼后臺系類
項目地址：vueAdmin-template
相關項目地址：vue-element-admin
系類文章一：手摸手拴竹，帶你用vue擼后臺 系列一（基礎篇）
系類文章二：手摸手，帶你用vue擼后臺 系列二（登錄權限篇）
系類文章三：手摸手剧罩，帶你用vue擼后臺 系列三(實戰(zhàn)篇）
下一篇文章真的真的會寫關于如何用 electron 包裝現(xiàn)有項目栓拜，快速實現(xiàn)一個跨平臺的終端后臺。
相應廣大需求 建了一個qq群 591724180 方便大家交流惠昔。