手摸手，帶你用vue擼後臺系列四(vueAdmin 一個極簡的後臺基礎模板)

時間 2019-11-05

標籤 vue 後臺系列 vueadmin 一個基礎模板简体版

原文原文鏈接

完整項目地址：vue-element-adminjavascript

系列文章：css

前言

作這個 vueAdmin-template 的主要緣由是: vue-element-admin 這個項目的初衷是一個 vue 的管理後臺集成方案，把平時用到的一些組件或者經驗分享給你們，同時它也在不斷的維護和拓展中，好比最近重構了dashboard，加入了全屏功能，新增了 tabs-view 等等。因此項目會愈來愈複雜，不太適合不少初用 vue 的同窗來構建後臺。因此就寫了這個基礎模板，它沒有複雜的功能，只包含了一個後臺須要最基礎的東西。 vueAdmin-template 主要是基於vue-cli webpack模板爲基礎開發的，引入了以下dependencies:html

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 的大小而且能更好的利用遊覽器的緩存。vue

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

在懶加載頁面很少的狀況下一切是那麼的美好，但我司後臺業務在不斷地迭代，如今項目近百個路由，這時候使用路由懶加載在開發模式下就是一件痛苦的事情了，隨手改一行代碼熱更新都是要6000ms+的，這怎麼能忍。樓主整整花了一天多的時間找緣由，能webpack優化的方法都用了,什麼 dll, HappyPack 等方法都是過了，但提高的效果都不是很明顯，正好那段時間出了 webpack3 樓主也升級了，編譯速度也獲得了很大幅度的提高，不過也要2000ms+。後來通過大神 @jzlxiaohei 的指點發現原來是路由懶加載搞得鬼，樓主猜想多是異步加載致使 webpack 每次的 cache 失效了，因此每次的rebuild 纔會這麼的慢。找到了緣由咱們就能夠對症下藥了，咱們就本身封裝了一個_import()的方法，只有在正式環境下才使用懶加載。這樣解決了困擾多事的rebuild慢問題。代碼java

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

整整比原來6000ms快了十多倍，我終於又能愉快的開發了。

權限控制

在手摸手，帶你用vue擼後臺系列二(登陸權限篇)這章中其實已經詳細介紹過了。該項目中權限的實現方式是：經過獲取當前用戶的權限去比對路由表，生成當前用戶具的權限可訪問的路由表，經過router.addRoutes動態掛載到router上。但其實不少公司的業務邏輯可能不是這樣的，舉一個例子來講，不少公司的需求是每一個頁面的權限是動態配置的，不像本項目中是寫死預設的。但其實原理是相同的。如這個例子，你能夠在後臺經過一個tree控件或者其它展示形式給每個頁面動態配置權限，以後將這份路由表存儲到後端。當用戶登陸後根據role，後端返回一個相應的路由表或者前端去請求以前存儲的路由表動態生成可訪問頁面，以後就是router.addRoutes動態掛載到router上，你會發現原來是相同的，萬變不離其宗。webpack

側邊欄:本項目裏的側邊欄是根據 router.js 配置的路由而且根據權限動態生成的，這樣就省去了寫一遍路由還要再手動寫側邊欄這種麻煩事，同是使用了遞歸組件，這樣無論你路由多少級嵌套，都能愉快的顯示了。權限驗證那裏也作了遞歸的處理。 ios

麪包屑:本項目中也封裝了一個麪包屑導航，它也是經過watch $route動態生成的。代碼nginx

因爲側邊欄導航和麪包屑亦或是權限，你會發現其實都是和router密切相關的，因此基於vue-router路由信息對象上作了一下小小的拓展，自定義了一些屬性

icon : the icon show in the sidebar

hidden : if hidden:true will not show in the sidebargit
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

你們也能夠結合本身的業務需求增改這些自定義屬性。

iconfont

element-ui自帶的圖標不是很豐富，但管理後臺圖標的定製性又很強。這裏只給你們推薦使用阿里的 iconfont ，簡單好用又方便管理。本項目中已經嵌入了一些 iconfont 做爲例子，你們能夠自行替換。這裏來簡單介紹一下 iconfont 的使用方式。首先註冊好 iconfont 帳號以後，能夠在個人項目中管理本身的 iconfont 。我司全部的項目都是用這個管理的，真心推薦使用。

建立好圖標庫後若是有更新替換也很方便，這裏我使用了 Symbol 的方式引入，這裏還有 unicode， font-class的引入方式，有興趣的能夠自行研究。以後咱們點擊下載 Symbol，會發現有以下這些文件，咱們只要關心 iconfont.js就能夠了

咱們將它替換項目中的 iconfont.js 就能夠了。本項目中也封裝了一個 svg component 方便你們使用。

<icon-svg icon-class="填入你須要的iconfont名字就能使用了"></icon-svg>
複製代碼

favicon

每一個項目都須要有一個屬於本身的favicon。

其實實現起來很是的方便，咱們主須要藉助 html-webpack-plugin

//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 }
  });
}
複製代碼