簡單10步，教你如何用 AntDesign + Vue 搭建一個可快速開發的後臺模板

時間 2020-05-09

標籤簡單如何 antdesign vue 搭建一個快速開發後臺模板简体版

原文原文鏈接

前言

相信你們在從零開發後臺管理系統的時候會遇到諸多問題，技術選型、UI組件、富文本選擇等等。然而萬事開頭難，如何搭建最開始的後臺框架或模板，我以爲是最爲重要的一點。本文將採用花褲衩式的同款手模手，用簡單的10個步驟，帶你快速構建一個本身喜歡的可快速開發的後臺模板。javascript

先奉上成果： vue-antdesign-admin-templatecss

技術選型

JavaScript 框架

建議選有對應 UI組件庫 的前端框架去開發，能夠在頁面佈局上節約不少時間。我的建議選目前市面上比較流行的三大框架VAR(Vue/Angular/React)，對於這三哥倆，各有利弊，這裏不作對比評論，可根據本身熟悉的框架或者團隊更青睞的框架去選取。本文以Vue爲例。html

UI 組件庫

Element | View UI（iView） | Ant Design of Vue 都是比較好的基於vue的高質量 UI 組件庫。前端

能夠根據本身或者團隊喜愛去選擇，本次樓主嘗試選擇了Ant Design Of Vue。vue

魯老先生曾經說過：「若是說我看得比別人更遠些，那是由於我站在巨人的肩膀上。」java

好吧，細心的觀衆老爺已經發現這不是魯迅說的，沒錯，原話出自於牛頓。牛頓的多種研究確實是以哥白尼、伽利略、開普勒等諸多科學家的科研成果爲基礎的。webpack

所以，學會站在巨人的肩膀上，是一種不錯和難得的策略。最近刷屏的《後浪》中也提到了這一點：「人類積攢了幾千年的財富，全部的知識，見識，智慧和藝術，像是專門爲大家準備的禮物,科技繁榮，文化繁茂，城市繁華，現代文明的成果被層層打開，能夠盡情的享用...」sorry，有點跑題了，收回來。ios

在利用 Ant Design of Vue 搭建基礎模板以前，有幸瞭解到這個項目：ANTD PRO VUE，此項目是 Ant Design Pro 的 Vue 版本，也是 Ant Design of Vue 的官方倉庫，將它做爲「巨人」，便開始了此次的搭（gai）建（zao）之路。git

開始搭建

1.項目佈局

對於大多數的後臺項目，結構都是有共性且可複用的，所以將其抽離，做爲相應的 Layout 頗有必要，在前期咱們將這個功能作好，後期會節約不少開發成本。github

Ant Design Pro 抽離了使用過程當中的通用佈局，放在 /layouts 目錄中，分別爲：

BasicLayout 基礎頁面佈局，包含了全局頭部導航，側邊欄和通知欄，設置抽屜等，是項目中的 Root Layout。
UserLayout 抽離出用於登錄註冊頁面的通用佈局。
PageLayout 基礎佈局，包含了麪包屑，和中間內容區 (slot)。
RouteLayout 空佈局，專門爲了二級菜單內容區自定義。
BlankLayout 空白的佈局。

如何使用：

能夠將 Layout 做爲父級路由去嵌套子路由，例如：

// BasicLayout例子
 {
    path: '/',
    name: 'index',
    component: BasicLayout,
    meta: { title: '首頁' },
    redirect: `${defaultRootRoutePath}/analysis`,
    children: [
      // 默認頁
      {
        path: defaultRootRoutePath,
        name: 'dashboard',
        redirect: `${defaultRootRoutePath}/analysis`,
        component: RouteLayout,
        meta: { title: '工做臺', keepAlive: true, icon: 'dashboard', permission: ['dashboard'] },
        children: [
          {
            path: `${defaultRootRoutePath}/analysis`,
            name: 'analysis',
            component: () => import('@/views/dashboard/Analysis'),
            meta: { title: 'hello', keepAlive: true, permission: ['dashboard'] },
          },
        ],
      },
      exampleModle,
      linkModle,
      reportManageModle
    ],
  }

// PageLayout例子
import { PageLayout } from '@/layouts'

const reportManageModle = {
  path: '/reportManage',
  name: 'reportManage',
  redirect: '/reportManage/list',
  component: PageLayout,
  meta: { title: '舉報管理', keepAlive: true, icon: 'frown', permission: ['dashboard'] },
  children: [
    {
      path: '/reportManage/list',
      name: 'reportManageList',
      component: () => import('@/views/reportManage/list'),
      meta: { title: '舉報列表', keepAlive: true, permission: ['dashboard'] },
    },
  ],
}

export default reportManageModle

複製代碼

2.環境區分

2.1 模式

模式是 Vue CLI 項目中一個重要的概念。默認狀況下，一個 Vue CLI 項目有三個模式：

development 模式用於 vue-cli-service serve
production 模式用於 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用於 vue-cli-service test:unit

須要注意的是：注意模式不一樣於 NODE_ENV，一個模式能夠包含多個環境變量。也就是說，每一個模式都會將 NODE_ENV 的值設置爲模式的名稱——好比在 development 模式下 NODE_ENV 的值會被設置爲 "development"。

你能夠經過爲 .env 文件增長後綴來設置某個模式下特有的環境變量。好比，若是你在項目根目錄建立一個名爲 .env.development 的文件，那麼在這個文件裏聲明過的變量就只會在 development 模式下被載入。

你能夠經過傳遞 --mode 選項參數爲命令行覆寫默認的模式。例如，若是你想要在構建命令中使用開發環境變量，請在你的 package.json 腳本中加入相關配置，例如：

"build-prod": "vue-cli-service build --mode production_env",
"build-test": "vue-cli-service build --mode test_env",
複製代碼

2.2 環境變量

只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你能夠在應用的代碼中這樣訪問它們：

console.log(process.env.VUE_APP_BASE_IMGURL)
複製代碼

特別提醒

除了 VUE_APP_* 變量以外，在你的應用代碼中始終可用的還有兩個特殊的變量：

NODE_ENV 會是 "development"、"production" 或 "test" 中的一個。具體的值取決於應用運行的模式。 BASE_URL 會和 vue.config.js 中的 publicPath 選項相符，即你的應用會部署到的基礎路徑。

咱們能夠根據本身的須要去配置環境變量，在不一樣模式中去配置不一樣的環境變量，當你根據命令去打包的時候環境變量會被自動替換，例如：

# .env.production_env

# API 地址
VUE_APP_API_BASE_URL = /api

# 打包輸出地址
VUE_APP_OUTPUTDIR = 'dist_prod'

# antDesign 是否可以更換主題
VUE_APP_CAN_CHANGE_THEME = true

# 上傳圖片地址
VUE_APP_BASE_API_UPLOAD = 'https://httpbin.org/post'

# 獲取圖片地址
VUE_APP_BASE_IMGURL = 'https://httpbin.org/get'
複製代碼

3.代碼規範

不論是多人運動仍是單人運動，啊呸，口誤...😂 —— 不論是多人開發仍是單人開發，我以爲代碼規範和代碼格式都很重要，加分號仍是不加分號？tab仍是空格？單引號仍是雙引號？等等一系列的代碼規範和校驗問題，交給這兩個傢伙就行了：

eslint + prettier

關於它們，掘金社區有不少優秀的文章，你們能夠自行搜索閱讀，這裏放一篇我看過以爲不錯的：使用ESLint+Prettier來統一前端代碼風格

要配置它們，可在根目錄下找到：

.prettierrc.js
.eslintrc.js
複製代碼

下面是 prettier 最經常使用到的配置，一般狀況修改這幾個配置項便可，也能夠參考文檔添加其餘配置。

// .prettierrc.js

module.exports = {
  printWidth: 150, // 一行的字符數，若是超過會進行換行，默認爲80
  tabWidth: 2, // 一個tab表明幾個空格數，默認爲2
  singleQuote: true, // 字符串是否使用單引號，默認爲false，使用雙引號
  semi: false, // 行尾部是否使用分號，默認爲true
  endOfLine: 'auto', // fix Delete `␍`eslint(prettier/prettier)
}
複製代碼

4.項目配置管理

後臺項目必定會有不少配置項，將項目中用到的的配置抽離到 src/config 中統一管理，方便後期維護，例如：

├─icons.js ----- // 解決 @ant-design_icons 打包體積過大問題 採用按需加載
├─index.js ----- //  項目通用全局配置
└─layout.js ---- // 項目UI結構默認配置項
複製代碼

5.數據交互

5.1 request封裝

數據交互是後臺項目中必不可少且最重要的部分，一般咱們會將請求方法封裝起來統一使用。這裏貼一下最簡單的封裝：（請求方法的封裝能夠根據後端和業務具體需求去特殊處理和擴展）

// request.js

import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import notification from 'ant-design-vue/es/notification'
import { VueAxios } from './axios'
import { TOKEN_NAME, prodUseMock } from '@/config/index'

let baseURL = prodUseMock ? '/api' : process.env.VUE_APP_API_BASE_URL

// 建立 axios 實例
const service = axios.create({
  baseURL, // api base_url
  timeout: 6000, // 請求超時時間
})

const err = (error) => {
  if (error.response) {
    const data = error.response.data
    const token = Vue.ls.get(TOKEN_NAME)
    if (error.response.status === 403) {
      notification.error({
        message: '被禁用的',
        description: data.message,
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLoginRequest)) {
      notification.error({
        message: '非法訪問',
        description: '受權驗證失敗',
      })
      if (token) {
        store.dispatch('Logout').then(() => {
          setTimeout(() => {
            window.location.reload()
          }, 1500)
        })
      }
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use((config) => {
  const token = Vue.ls.get(TOKEN_NAME)
  if (token) {
    config.headers['Access-Token'] = token // 讓每一個請求攜帶自定義 token 請根據實際狀況自行修改
  }
  return config
}, err)

// response interceptor
service.interceptors.response.use((response) => {
  return response.data
}, err)

const installer = {
  vm: {},
  install(Vue) {
    Vue.use(VueAxios, service)
  },
}

export { installer as VueAxios, service as axios }

複製代碼

建議將項目的請求按照模塊進行概括，統一放在 src/api 中管理。例如：github.com/yalin28/vue…

5.2 mock

在後端接口還沒出來，在構建業務須要部分數據的時候能夠考慮採起 Mock 來模擬數據請求，方便前期佈局和處理業務等。

如何使用：在 src/mock 目錄中封裝了簡單的構造方法，能夠參考官方文檔去配置本身須要用到的 mock 數據。

若是你想更簡單點，你能夠採用大搜車團隊開源的 Easy Mock 去模擬數據，使用方法能夠參考我以前的文章：利用Easy Mock簡單模擬開發數據接口

注意，mockjs 不支持 IE ，若是你須要考慮兼容 IE ，請不要再正式環境中使用它。

6.樣式管理與主題定製

6.1樣式管理

後臺項目中，咱們應該把多處用到的樣式抽離出來統一管理，樣式集合寫在 src/style/ 目錄下，咱們能夠結合css預處理器將經常使用的樣式片斷作成 mixins。

例如：

咱們能夠將 vue 路由切換的動畫效果寫在 src/style/transition.less 中，此目錄中提供了兩種切換效果，能夠根據須要去切換和關閉。

咱們能夠將 less函數和變量 寫在 src/style/utils.less 中。

在此次 vue-antdesign-admin-template 的構建中，因爲UI組件庫使用的 less，爲了兼容性，項目選擇 less 做爲預處理器，爲了能使用全局的 less函數，咱們須要引入 style-resources-loader 工具，能夠將自定義的全局 less 函數用到任意 view 或 components 中。（若是你使用的是其餘預處理器能夠自行處理，配置大同小異。）

使用 style-resources-loader 須要安裝 style-resources-loader 和 vue-cli-plugin-style-resources-loader

而後在 vue.config.js 的 pluginOptions 中配置：

// src/style/utils.less 對應你須要注入的全局樣式和less函數
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      // 注入全局樣式
      patterns: [path.resolve(__dirname, 'src/style/utils.less')],
    },
  },
複製代碼

例如如下經常使用的三個 less 函數：

// 字體顏色
.sc(@size, @color) {
  font-size: @size;
  color: @color;
}
// 文本水平居中
.tc() {
  text-align: center;
}
// 文本垂直居中
.hl(@param) {
  height: @param;
  line-height: @param;
}
複製代碼

使用案例，設置 p標籤 文字大小爲 14像素 、文字顏色爲橙色且單行文本 水平垂直居中 ：

<style scoped lang="less">
  p{
    .tc()
    .sc(14px,orange)
    .hl(1em)
  }
</style>

複製代碼

6.2 主題定製

Antdesign 的樣式使用了 Less 做爲開發語言，並定義了一系列全局/組件的樣式變量，你能夠根據需求進行相應調整。

一些經常使用的變量：

@primary-color: #1890ff; // 全局主色
@link-color: #1890ff; // 連接色
@success-color: #52c41a; // 成功色
@warning-color: #faad14; // 警告色
@error-color: #f5222d; // 錯誤色
@font-size-base: 14px; // 主字號
@heading-color: rgba(0, 0, 0, 0.85); // 標題色
@text-color: rgba(0, 0, 0, 0.65); // 主文本色
@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
@border-radius-base: 4px; // 組件/浮層圓角
@border-color-base: #d9d9d9; // 邊框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮層陰影
複製代碼

須要瞭解全部能夠配置的變量：請點我

如何定製：

antDesign Of Vue 使用 modifyVars 的方式來進行覆蓋變量。

以 webpack@4 爲例進行說明，對 less-loader 的 options 屬性進行相應配置。若是使用的是 Vue CLI 構建項目，修改 vue.config.js 中 css loaderOptions 的配置便可：

loaderOptions: {
  less: {
    modifyVars: {
      // 經過修改默認ant主題的less變量實現自定義主題
      // 'primary-color': 'red',
      // 'link-color': 'red',
      // 'border-radius-base': '0px',
    },
    javascriptEnabled: true,
  },
},
複製代碼

或者你沒使用 Vue CLI：

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}
複製代碼

6.3 總體風格設置

可不能夠快速地、可視化地去配置項目的總體風格呢？答案是確定的，ANTD PRO VUE 提供了一個可快速設置項目總體UI風格的 SettingDrawer，能夠快速設置主題色，導航模式，多標籤模式等。設置後會以本地緩存的模式記錄配置，下次加載頁面的時候會判斷是否有緩存並持續生效。

做爲一個後臺模板，這個功能雖然不是必要的，但卻有畫龍點睛之用。你說我是願意去手搓代碼寫配置呢仍是拿起鼠標點點點呢？🤪

7.權限控制

權限控制是後臺系統中最多見的功能，一般是根據後端接口獲取用戶角色，根據角色獲取對應的權限（路由）。

在 vue 項目中，咱們能夠根據路由去控制權限，根據當前登陸的用戶對應的角色權限去生成路由表，經過 router.addRoutes 動態掛載到 router。具體實現可參考 src/permission.js 和 src/store/modules/permission.js

若是不須要權限控制，移除main.js 對應的引入，修改 src/config/index.js 中的 openPermission 便可。

8.狀態管理

後臺項目南面涉及到多頁面數據共享和數據持久化的問題。要處理這些問題，咱們能夠採起 Vuex + vue-ls 的策略。

Vuex 這裏很少說，若是你項目很小的話，你也能夠考慮不用它，畢竟用了會增長不少額外的工做。

vue-ls 可讓你的數據持久化，好比主題設置。其原理是將數據寫入 localstorage 。在 src/config/index.js 中的 storageOptions 能夠對 vue-ls 去進行配置。

9.富文本編輯器

後臺項目固然少不了富文本編輯器，選一個你鐘意的富文本編輯器，把它作成組件裝入你的後臺模板中。樓主早期有用過百度的 UE ，可是 UE 的坑不少，UI界面和 AntDesign 顯得格格不入，後面在大佬的安利下，入手了 Tinymce 。

組件源碼來源於 panjiachen 大佬，稍微做了修改，兼容了 AntDesign。組件位於 src/components/Tinymce，能夠根據業務去具體調整和修改。本次搭建模板的富文本例子能夠點此預覽

若是你須要用其餘富文本，思路也是同樣的，單獨抽離出來封裝成一個組件。不知道該怎麼去選擇富文本編輯器的能夠參考大佬的文檔：vue-element-admin | 富文本

10.項目優化

感謝親愛的讀者你都能讀到第10步，離成功就差一點了👏👏👏 。

最後一步：項目優化。

如何去對搭建好的的項目優化，或許咱們能夠這樣去作（或許都是咱們耳熟能詳的處理方法，可是這些真的頗有用！）

合理的項目目錄，讓項目結構清晰，後期方便維護和迭代。
開啓gzip壓縮，減小請求內容體積。
assetsCDN，加快頁面響應。
按需加載組件，例如 src/config/icons.js 和 src/core/lazy_lib/components_use.js 的按需加載配置，能夠根據所選擇的 UI組件庫 去配置。
避免將不須要的組件打包。
經過運行命令 vue-cli-service build --report 查看打包分析，對應調整。Vue Cli給咱們提供了打包分析，配置在 package.json 中能夠快速打包分析，若是沒用VueCli構建項目也能夠手動安裝打包分析的插件。

最後

本文以 vue-antdesign-admin-template 爲例子，介紹了用 antDesign+Vue 搭建一個快速開發的後臺模板一個定製和構建的模板須要去作哪些工做，和具體的步驟。搭建好模板後，後期項目須要的就是往裏面添磚加瓦，蓋起項目「樓層」便可，對於開發後臺項目會有事半功倍的效果。

再次感謝爲咱們提供輪子的大佬們，讓咱們能夠成爲配置工程師，同時我也但願有朝一日也能成爲像大佬們那樣優秀的人，加油！

若是你喜歡本文章或者文章對你有幫助或是啓發的話，歡迎評論交流，也能夠一鍵三連（什麼，你連三連是啥都不知道？😲，讓我告訴你：點贊 + 評論 + star）。若是文章有錯誤或者遺漏之處，望幫忙指出，感謝！