vue-element-admin 技術棧

毛仔發表於2018-11-21
Vue

基礎概念

vue-cli

vue-cli 俗稱vue腳手架，是一個vue開發的環境，將你寫的vue檔案、sass檔案等靜態資源進行編譯壓縮，生成瀏覽器能訪問的html頁面, vue-cli裡面運用的是vue單檔案元件的寫法。

element

element是基於vue語法的UI庫，元件豐富，互動體驗好，適用於做後臺應用

vue-element-admin

vue-element-admin 是基於vue-cli和element做成的一個後臺應用的模板，裡面封裝了很多實用的方法和UI（圖表，上傳元件，介面請求的封裝等等），讓你能把更多的精力放到功能流程的完成上。

應用基礎

es6 語法

vue是基於es6的，所以如果對es6不熟悉，應該先看一下es6的文件，至少知道下面幾個寫法

物件導向
寫一個module.js

    const obj = {test:1}
    export default obj

引用

import {test} from module.js

上面這句等於下面這兩句

import module from module.js
let test  =  module.test

物件定義時

data() {}   =   data: function(){}
components: { cateAdd } = components: { cateAdd:cateAdd}

箭頭回撥

test().then(res => { 
    console.log('這裡是成功的回撥')
}).catch(
    error => { console.log('這裡是失敗的回撥')
})

阮一峰es6教程

vue語法和單檔案元件

對於vue,需要先了解三塊，基本語法，單檔案元件，生命週期函式

  • 基本語法
    看文件，vue的思路和寫法看一遍文件基本上就可以了

  • 單檔案元件
    一個.vue的檔案被輸出為一個物件

    import testCate from 'test.vue'
    // 使用的時候

  • vue文件

使用element元件

element元件本質上就是一個一個的單檔案vue元件，引入後，即可使用，然後定義了各種引數，屬性和方法 用法比較簡單element文件

瞭解vue-element-admin基本結構

在vue-element-admin中，大多數程式碼都是寫在src中， api中寫介面請求,view中寫vue檔案，store中寫資料管理，其他的用法看文件

實際應用

vue-router

vue-router是定義前端的路由和對應顯示頁面的管理工具，vue-element-admin整合了vue-router, 並且寫好了路由檔案對應左側列表的渲染方法，所以我們只需要在/src/router/index.js中定義好路由就行了，所以寫這個專案對vue-router使用水平的要求不高，如果想了解的更透徹一點，可以看文件

vue-axios

vue-axios是介面請求的工具，同樣的vue-element-admin也封裝了，寫成了request.js

  import request from '[[[[[[[[[[[[[[@](https://learnku.com/users/29000)](https://learnku.com/users/27102)](https://learnku.com/users/25661)](https://learnku.com/users/19319)](https://learnku.com/users/10240)](https://learnku.com/users/8907)](https://learnku.com/users/8278)](https://learnku.com/users/29000)](https://learnku.com/users/27102)](https://learnku.com/users/25661)](https://learnku.com/users/19319)](https://learnku.com/users/10240)](https://learnku.com/users/8907)](https://learnku.com/users/8278)/utils/request'
  request({
    url: '/category',
    method: 'post',
    params: param
  })

這裡有個坑，介面給過來的報錯資訊，都會被axios預設處理，捨棄介面丟擲的資訊，這就需要在封裝的地方進行修改，但是error物件列印不出來，看不到裡面的資訊，通過找文件看到，error確實是一個物件，包含了所有資訊，只是直接列印打不出來，error.response.data.message即可拿到介面的錯誤資訊
文件

狀態儲存 vuex

狀態儲存用到的就比較多了，什麼叫狀態儲存呢，其實是一個資料層，很多時候，我們需要子元件中觸發父元件的資料改變，但是vue對於這一點的支援很差，所以，有了這個資料處理的工具，我們無論在哪裡，直接修改這個資料倉儲中的值即可，而繫結了這個資料的地方，就會隨之全部改變。所以這個元件要看文件詳細的瞭解，不用要求看一遍什麼都懂，大概瞭解一下，就可以先看專案中的使用方法，main.js /src/store /src/views/cate.vue 從引入到使用看一遍就可以了。

遇到的語法總結

  • 專案中引用了eslint程式碼檢測工具，所以加入你的寫法不對 會報紅警告，哪怕是多一個或少一個空格
  • js全部不要加分號
  • @ 指的是src目錄 比如 '@/api' 指的就是 '/src/api'
  • store的使用， 可以在 vue元件中 this.$store.state. 也可以引入 @/src/index.js store.state.
  • 列表獲取的全域性資料，不能是直接定義資料 而是要定義成計算屬性,比如，定義了一個data:test vue能監測到data的改變，從而修改檢視和對應的資料，但是，如果是test變了，這樣定義是監測不到的
  • 一個vue檔案的順序應該是 template script style 這樣方便維護

    開發配置+打包釋出

    在/config中，有三個env檔案，

  • dev.env.js是本地開發環境的配置
  • prod.env.js是是線上生產環境的配置
  • sit.env.js 是線上測試環境的配置

開發過程中 npm run dev 程式會預設讀取dev.env.js中的配置進行編譯
打包時候 npm run build:prod 會讀取prod.env.js中的配置進行編譯，並在/dist中生成打包檔案，生成的檔案很簡單，靜態資原始檔+ index.html 中是一個css和四個js檔案，導致特別慢，需要12.5秒才能開啟，所以需要把這五個檔案進行cdn加速，加速之後是300ms-800ms，但是等專案大了之後，還是會慢，這個是最大的問題。

相關文章