VUE 使用總結

vue 的中文文件https://cn.vuejs.org/v2/api/很全，這裡是使用後的個人總結，專案地址vue-admin。

專案關鍵詞

• Element 元件庫
• bootstrap 樣式庫
• fontawesome 圖示庫
• stylus 語法
• eslint 和 prettier 程式碼風格檢查
• 使用基於promise 封裝的原生 fetch
• easy-mock 模擬資料

1. Element 餓了麼出品，已比較完善，樣式封裝、圖示，開發一套專案夠用，主打 VUE 版，同時也有 react、angular 版，標籤以el-開頭。bootstrap-vue沒有 Element 活躍，標籤以b-開頭，現在好像已沒有程式碼維護了；
2. bootstrap 樣式庫，可以在引入 css檔案，也可以通過引入 bootstrap-vue來引入樣式；
3. eslint和 pritter 組合使用來約束程式碼規範，vscode 也支援外掛安裝，建議同時安裝 vscode 版外掛，這樣在寫程式碼時就直接給出(經測試不安裝外掛只用依賴方式需要儲存編譯後才會出錯)。在兩者同時使用時注意可能會存在規則衝突，主要是調整配置eslintrc.js；
4. easy-mock 提供了開發者在開發階段可以直接配置的服務介面。

vue router 和 vuex

1. vue 路由 router

   1. 路由每一個path 都對應一個 componet 來處理
   2. 許可權控制在路由過濾中處理router.beforeEach，所有請求先有beforEach 中的回撥來處理，如果沒有許可權，則可呼叫next(/login)來實現跳轉到登陸介面

2. vue 單項資料流
   
   引入vuex 後
   

styuls

1. stylus 沒有括號、分號和冒號，使用縮排來簡潔使用，在父樣式下使用&來寫子樣式，下面是一個例子

<style lang='stylus' scoped>
.user
  width 100%
  background-color #fff
  border 1px solid #ddd
  border-radius 5px
  padding-top 1em
  padding-bottom 1em
.operate-pane
  display flex
  & .input
    width 20em
.pagination
  text-align right
  display block
</style>

目錄結構

1. api 存放和服務端互動的程式碼
2. store 存放全域性資料狀態
3. permission 是許可權管理
   整體結構
   
   展開後
   

語法總結參考