vue-element-admin 使用

一、vue-element-admin 

1、簡介

而vue-element-admin是基於element-ui 的一套后台管理系統集成方案。

功能：https://panjiachen.github.io/vue-element-admin-site/zh/guide/#功能

GitHub地址：https://github.com/PanJiaChen/vue-element-admin

項目在線預覽：https://panjiachen.gitee.io/vue-element-admin

 

 

 

 

 

 

2、解壓文件到工作區安裝

# 解壓壓縮包
# 進入目錄
cd vue-element-admin-master
# 安裝依賴
npm install
# 啟動。執行后，瀏覽器自動彈出並訪問http://localhost:9527/
npm run dev

 

二、vue-admin-template-master

1、簡介

vue-Admin-template是基於vue-element-admin的一套后台管理系統基礎模板（最少精簡版），可作為模板進行二次開發。

GitHub地址：https://github.com/PanJiaChen/vue-admin-template

建議：你可以在 vue-admin-template 的基礎上進行二次開發，把 vue-element-admin當做工具箱，想要什么功能或者組件就去 vue-element-admin 那里復制過來。

2、安裝

# 解壓壓縮包
# 進入目錄
cd vue-admin-template-master
# 安裝依賴
npm install
# 啟動。執行后，瀏覽器自動彈出並訪問http://localhost:9528/
npm run dev

一、項目的創建和基本配置

 

1、創建項目

 

將vue-admin-template-master重命名為XXXXXXX

 

2、修改項目信息

 

package.json

{
    "name": "xxxxx",
    ......
    "description": "XXXX管理系統",
    "author": "Helen <[e-mail]>",
    ......
}

3、如果需要修改端口號

config/index.js中修改

port: 9528

4、項目的目錄結構

. 
├── 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 //認證入口

 

 

 

 

 

 

 

 

 

5、運行項目

npm run dev

 注意：

 

打開 config/index.js，配置是否開啟語法檢查

useEslint: true,

 

建議關閉，檢查比較嚴格