---
title: vue-template-admin
tags: vue, vue-template-admin
description: Vue version difference between 2 and 3.
---

# <font size="7">vue-template-admin</font>


[vue-element-admin](https://panjiachen.github.io/vue-element-admin/#/dashboard)

[vue-admin-template](https://panjiachen.github.io/vue-admin-template/#/dashboard)

---

## vue + element-ui

- 登入 / 登出

- 權限驗證
  - 頁面權限
  - 指令權限
  - 權限配置
  - 兩步驟驗證

- 多環境發布
  - dev sit stage prod

- 全域功能
  - i18n
  - 動態切換主題
  - 動態側邊攔（支援多層巢狀路由）
  - 動態麵包屑
  - 頁籤導覽 (tags view)
  - Svg Sprite
  - 本地/後端 mock 資料
  - 全螢幕功能
  - 響應式收合側邊欄

- 文字編輯器
  - 富文本
  - Markdown
  - JSON 等多格式

- Excel
  - 匯出excel
  - 匯入excel
  - 前端可視化excel
  - 匯出zip

- 表格
  - 動態表格
  - 拖曳表格
  - 行內编辑

- 錯誤頁面
  - 401
  - 404

- 組件
  - 頭貼上傳
  - 回到頁首
  - 拖曳Dialog
  - 拖曳Select
  - 拖曳看板
  - 列表拖曳
  - SplitPane
  - Dropzone
  - Sticky
  - CountTo

- 綜合範例
- 錯誤日誌
- Dashboard
- 引導頁
- ECharts 圖表
- Clipboard(剪貼複製)
- Markdown2html

---

## 路由權限驗證

前端會有一份路由表，它表示了每一個路由可訪問的權限。當用戶登錄之後，通過 token 獲取用戶的 role ，動態根據用戶的 role 算出其對應有權限的路由，再通過router.addRoutes動態掛載路由。

<font size="5">
relates: `動態側邊攔（支援多層巢狀路由）` `動態麵包屑`
</font>

---

## svg symbol

- 演進 (icon font)
- unicode > font-class > symbol
- 特點
- 多色
- 可用 css (`font-size` & `color`) 改樣式
- ie9+
- css animation
- 減少 HTTP 請求
- 向量、不失真
- 很精細的控制 svg

---

- 封裝 svg component

//components/Icon-svg
<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<!-- ... 略 -->

- svg-sprite-loader & [`require.context`](https://webpack.js.org/guides/dependency-management/#context-module-api)
- 在指定資料夾存入 svg 即自動引入 svg symbol

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

---

## mock server

- [mockjs](https://github.com/nuysoft/Mock)
- 基於 [webpack-dev-serve](https://webpack.js.org/configuration/dev-server/#devserveronbeforesetupmiddleware) 模擬 REST API
- 支援 hot module reload
- [demo](https://github.com/PanJiaChen/vue-element-admin/blob/master/mock/user.js)

---

## snippets 自動生成程式碼

使用 [plop](https://github.com/plopjs/plop) 提供快速新增 `.vue` 檔案的做法

npm run new


---

[Reference article](https://juejin.cn/post/6844903476661583880)
[vue-element-admin github](https://github.com/PanJiaChen/vue-element-admin)