vue-template-admin

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動態掛載路由。

relates: `動態側邊攔（支援多層巢狀路由）` `動態麵包屑`

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
- 在指定資料夾存入 svg 即自動引入 svg symbol

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

mock server

mockjs
- 基於 webpack-dev-serve 模擬 REST API
- 支援 hot module reload
- demo

snippets 自動生成程式碼

使用 plop 提供快速新增 .vue 檔案的做法

 npm run new

Reference article
vue-element-admin github

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

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