vueadmin-template模板使用目前是比較流行的，它是在elementui基礎上再次封裝的。github地址：https://github.com/PanJiaChen/vue-admin-template

1、安裝

在GitHub上https://github.com/PanJiaChen/vue-admin-template下載，下載完之後我們把名稱修改一下為自己的名稱，然後進行安裝：

#cnpm install
#npm run dev 啟動

【預設啟動埠】在build---》config---》index.js中修改埠。

2、目錄結構說明

【目錄結構】

├── build                      // 構建相關  
├── config                     // 配置相關
├── src                        // 原始碼
│   ├── api                    // 所有請求
│   ├── assets                 // 主題 字型等靜態資源
│   ├── components             // 全域性公用元件
│   ├── directive              // 全域性指令
│   ├── filtres                // 全域性 filter
│   ├── icons                  // 專案所有 svg icons
│   ├── lang                   // 國際化 language
│   ├── mock                   // 專案mock 模擬資料
│   ├── router                 // 路由
│   ├── store                  // 全域性 store管理
│   ├── styles                 // 全域性樣式
│   ├── utils                  // 全域性公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口頁面
│   ├── main.js                // 入口 載入元件 初始化等
│   └── permission.js          // 許可權管理
├── static                     // 第三方不打包資源
│   └── Tinymce                // 富文字
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置項
├── .gitignore                 // git 忽略項
├── favicon.ico                // favicon圖示
├── index.html                 // html模板
└── package.json               // package.json
 

【api和views目錄】

我們發現views目錄放的都是.vue檔案，而api目錄存放的都是.js檔案。其實views和api目錄下的檔案是一一對應的。

【components 目錄】

這裡的 components 放置的都是全域性公用的一些元件，如上傳元件，富文字等等。一些頁面級的元件建議還是放在各自views檔案下，方便管理。

3、封裝axios

在vueadmin-template下axios其實已經被封裝過了。我們找到src-->--util>request.js檔案就發現axios已經封裝了。如果我們想使用可以這麼使用：

//匯入
import request from '@/utils/request'
//使用
export function getInfo(params) {
  return request({
    url: '/user/info',
    method: 'get',
    params  //引數
  });
}
 

4、icon圖示和font字型

      element-ui預設的icon不是很多，這裡使用阿里的iconfont(https://www.iconfont.cn/)簡直是神器；它提供了png,ai,svg三種格式，同時使用也支援unicode，font-class，symbol三種方式。

5、router-view

自定義路由元件真實的業務場景中，這種情況很多；

     建立和編輯的頁面使用的是同一個component,預設情況下當這兩個頁面切換時並不會觸發vue的created或者mounted鉤子，官方說你可以通過watch $route的變化來做處理，但其實說真的還是蠻麻煩的。後來發現其實可以簡單的在 router-view上加上一個唯一的key，來保證路由切換時都會重新渲染觸發鉤子了。這樣簡單的多了

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }