vue-admin-element https://panjiachen.github.io/vue-element-admin-site/zh/

基於vue的生態做的很好，提供的很多的文件，中文。並且有視訊。

vue

element == element ui

vue-cli實現（腳手架）

內建了 i18 國際化解決方案 提供了中文

1、安裝：

# 克隆專案
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 進入專案目錄
cd vue-element-admin

# 安裝依賴
npm install  # 翻牆安裝  npm  ==  linux 中  yum  包管理工具 npm時候node的包管理工具
# node_modules

# 建議不要用 cnpm 安裝 會有各種詭異的bug 可以通過如下操作解決 npm 下載速度慢的問題
npm install --registry=https://registry.npm.taobao.org

# 需要啟動mock服務
# 執行 mock
# python mock.py

# 本地開發 啟動專案
npm run dev # 專案的根目錄

2、框架中重點關注：

├── src                        # 原始碼
│   ├── api                    # 所有請求   *
│   ├── assets                 # 主題 字型等靜態資源
│   ├── components             # 全域性公用元件  *
│   ├── directive              # 全域性指令
│   ├── filters                # 全域性 filter
│   ├── icons                  # 專案所有 svg icons
│   ├── lang                   # 國際化 language
│   ├── layout                 # 全域性 layout
│   ├── router                 # 路由   
 
*
│   ├── store                  # 全域性 store管理
│   ├── styles                 # 全域性樣式
│   ├── utils                  # 全域性公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有頁面  *
│   ├── App.vue                # 入口頁面
│   ├── main.js                # 入口檔案 載入元件 初始化等
│   └── permission.js          # 許可權管理
 

3、目標：

parameter.html 遷移到 vue-admin框架

parameter.html 就是基於elementui實現的 vue-element-admin 框架也是基於 vue和element-ui實現的

前端 3 大塊

js、css、html

匯入模組，匯出模組：

第一種
export { parameterRouter } // 匯出模組
import { parameterRouter } from './modules/parameter'

第二種
  export default {     // 只能匯出一個
    name: 'parameter'
  }
  import chartsRouter from './modules/charts'   //  不帶大括號的都是 和 export default結合使用的

4、新建頁面：

4.1 配置路由

例：src/router/parameter.js

import Layout from '@/layout' //匯入一個模組，選單模組
const parameterRouter = {  //定義一個常量
  path: '/main', //路徑
  component: Layout,
  redirect: 'noRedirect',  //重定向
  meta: {
    icon: 'lock',
    roles: ['qa'] // 許可權
  },
  children: [
    {
      path: 'parameter',
      component: () => import('@/views/parameter/index'),
      name: '引數管理',
      meta: { title: '引數管理', icon: 'table' }
    }
  ]
}

export { parameterRouter }   //匯出模組，當你想要外部應用你的模組，要用export，多個變數用，隔開   export{a,b}

4.2在Views目錄建立 對應業務的資料夾，資料夾下有預設的一個index.vue parameter.html

例：src/views/parameter目下有個index.vue

4.3建立API，和後臺請求的介面，每開發一個模組，需要在src/api目錄下建立一個針對這個模組的API介面

例：src/api/parameter.js

4.4src/utils/requests.js 實際是對axios進行封裝，最後暴露一個模組

4、pycharm安裝vue外掛

File--Settings--Plugins

搜尋vue，選擇第一個vue.js，Install

安裝成功後，重啟pycharm