vueadmin-template應用1:安裝入門
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()
}
}