項目參考 vue-element-admin
目標
為解決前端開發當中部分重復性勞動力,把更多的精力放在交互上。
后台管理可以分為幾個模塊
- layout(整體布局)
- Header頭部
- Menu菜單
- Main頁面
細化Main可分為
搜索欄
工具欄
表格/圖表
分頁
模態框
實現
常用功能都以抽象成組件。實際開發當中只需要按照固定格式， 編寫少量的配置文件即可實現頁面的搭建。為開發節省了大量的 布局時間。實現敏捷式開發。
目錄
│ favicon.ico
│ index.html
│ LICENSE
│ package.json
│ README.md
├─build
├─config
├─node_modules
├─src
│ │ App.vue
│ │ main.js 主入口
│ │ permission.js 全局路由守衛
│ ├─api 服務端接口文件
│ ├─assets 資源文件（包括icon）
│ │ └─icon
│ ├─components 抽象出來的組件
│ ├─mock 模擬服務端請求數據
│ ├─router 路由配置文件
│ ├─store vuex文件
│ ├─styles 全局樣式集合
│ ├─utils 抽象出來的常用工具
│ └─views 模板頁面
└─static 靜態資源文件
search_try
總結
多數都是實際開發過程當中總結出來的經驗。很多場景實際上還沒有覆蓋， 后續會持續迭代。
准備工作
git clone git@gitee.com:gjwork/base-admin.git
安裝&運行
- 推薦使用 yarn 安裝，執行以下命令
yarn
yarn dev
- 如果使用 npm，可執行 npm install && npm run dev，效果一致。