1. 程式人生 > 其它 >實戰專案-07(前端(vue-element-admin))

實戰專案-07(前端(vue-element-admin))

vue-element-admin/vue-admin-template

簡介(vue-element-admin)

是一個基於element-ui的一套後臺管理系統整合方案
功能是:https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

安裝

  1. 解壓壓縮包
  2. 進入目錄(在終端中開啟)
  3. 安裝依賴(安裝之前先解除安裝npm uninstall node-sass然後安裝cnpm i node-sass -D)基於上一篇的解決方案
  4. 啟動測試npm run dev 訪問http://localhost:9528/

簡介(vue-admin-template)

還基於vue-element-admin的一套後臺管理系統(基礎的模板),可作為模板二次開發.
此處使用的是這個,將這個進行了二次開發

安裝

  1. 解壓壓縮包
  2. 進入目錄(在終端中開啟)
  3. 安裝依賴(安裝之前先解除安裝npm uninstall node-sass然後安裝cnpm i node-sass -D)基於上一篇的解決方案
  4. 啟動測試npm run dev 訪問http://localhost:9527/

專案的結構

結構

.
├── build // 構建指令碼
├── config // 全域性配置
├── node_modules // 專案依賴模組
├── src //專案原始碼
├── static // 靜態資源
└── package.jspon // 專案資訊和依賴配置
src
├── api // 各種介面
├── assets // 圖片等資源
├── components // 各種公共元件,非公共元件在各自view下維護
├── icons //svg icon
├── router // 路由表
├── store // 儲存
├── styles // 各種樣式
├── utils // 公共工具,非公共工具,在各自view下維護
├── views // 各種layout
├── App.vue //專案頂層元件


├── main.js //專案入口檔案
└── permission.js //認證入口

將config index.js中的usereslint:true改為false
在config dev.env.js中修改後端介面的地址