# <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 ```htmlembedded= //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 ```javascript= 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` 檔案的做法 ```bash= npm run new ```  --- [Reference article](https://juejin.cn/post/6844903476661583880) [vue-element-admin github](https://github.com/PanJiaChen/vue-element-admin)