前言
本文是以 花褲衩 大佬的 vue-element-admin 項目爲模板、結合公司需求開發的後臺管理系統的學習筆記。
原項目地址：vue-element-admin
參考文章：手摸手用 vue 擼後臺系列
安裝與配置
新建 vue-cli 項目，相關安裝及配置不多做介紹，有需要可自行搜索。接着是安裝項目依賴。
基本依賴庫：
- Vue-Router Vue.js 官方的路由管理器
- Axios 基於promise 的 HTTP 庫
- Element-UI 一套爲開發者、設計師和產品經理準備的基於 Vue2.0 的桌面端組件庫
- Vuex 一個專爲 Vue.js 應用程序開發的狀態管理模式
擴展依賴庫：
- node-sass css 擴展語言
- normalize.css 爲默認的 HTML 元素樣式上提供跨瀏覽器的高度一致性
- js-cookie 一款輕量級的 js 操作 cookie 的插件
- i18n Vue.js 的國際化插件，它可以輕鬆地將一些本地化特性集成到 Vue 中
- driver.js 一款輕量級、無需依賴但功能強大的原生 JavaScript，兼容所有主流瀏覽器，可幫助你將用戶的注意力集中在頁面上
- NProgress 細長的全站進度條
- SVG sprite loader 用於根據導入的 svg 文件自動生成 symbol 標籤並插入 html
- Sortable 一款輕量級的拖放排序列表的 js 插件
- ECharts 一款功能強大的圖表和可視化庫
- screenfull 一款全屏插件
項目結構
├── build // 構建相關
├── config // 配置相關
├── disk // 打包文件
├── node_modules // 依賴項
├── src // 源代碼
│ ├── api // 所有請求
│ ├── assets // 主題 字體等靜態資源
│ ├── components // 全局公用組件
│ ├── directive // 全局指令
│ ├── waves // 水波紋指令
│ ├── icons // 項目所有 svg icons
│ ├── lang // 國際化 language
│ ├── mock // 項目mock 模擬數據
│ ├── roter // 路由
│ ├── store // 全局 store管理
│ ├── styles // 全局樣式
│ ├── utils // 全局公用方法
│ ├── views // views 所有頁面
│ ├── account // 賬戶管理
│ ├── court // 法院管理
│ ├── dashboard // 功能主頁
│ ├── device // 設備管理
│ ├── errorPage // 錯誤頁面
│ ├── layout // 整體佈局
│ ├── login // 登錄頁面
│ ├── redirect // 重定向頁面
│ ├── statistics // 數據統計頁面
│ ├── versions // 版本管理頁面
│ ├── writs // 文書管理頁面
│ ├── App.vue // 入口頁面
│ ├── errorLog.js // 錯誤日誌
│ ├── main.js // 入口文件 加載組件 初始化等
│ ├── permission.js // 權限管理
├── static // 第三方不打包資源
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置項
├── .gitignore // git 忽略項
├── favicon.ico // favicon 圖標
├── index.html // html 模板
├── package.json // 依賴項目錄
├── README.MD // 說明文檔簡單講下 src 文件夾
api 與 views
根據項目的業務劃分 views 頁面展示部分，並將 api 接口請求與 views 一一對應，有利於迭代更新與後期維護。
components
將全局公用的模塊與組件存放在 components 文件夾中，頁面級的的組件建議還是放在各自的 views 文件夾下。
store
在 index 入口文件引入 modules 對象，獨立封裝各個模塊狀態。
axios
在 axios 配置檔設置基礎 URL，根據環境變量動態切換 api，需要在 config/dev.env.js 文件中配置接口路徑。
lang
將中英文語言包各自封裝
並在入口 index.js 配置導入
在 main.js 使用 i18n。
