Vue開發總結 及 一些最佳實踐 （已更新）

基本開發環境

vue-cli3 建立的項目，vscode 做爲代碼編寫工具
vscode插件推薦：vscode 插件配置

文章目錄

1. 項目目錄結構介紹
2. UI 框架選擇
3. main,js 處理
4. axios 請求二次封裝

1. 項目目錄結構簡介

├── public // index.html
├── src // 業務相關
│ ├── assets // 靜態文件(css, images)
│ ├── components // 全局組件
│ ├── layouts // 基礎樣式佈局
│ ├── plugin // 樣式及工具引入
│ ├── request // 請求配置
│ ├── router // 路由
│ ├── store // 全局狀態管理
│ ├── utils // 工具文件
│ ├── app.vue // 入口文件
│ ├── main.js // 主要配置文件
│ └── views // 頁面
├── .eslintrc.js // eslint 檢查配置
├── .env.release // 測試環境變量
├── .env.pre-build // 預發環境變量
└── vue.config.js // webpack 打包配置

2. UI 框架選擇

經框架選擇驗證對比 element，iview，ant-design-vue
最終選擇 ant-design-vue，傳送門 https://vue.ant.design/docs/vue/introduce-cn/

優勢：

1. 好看

1. 文檔清晰

   1. 使用方便，示例清晰
2. bug少，組件使用順滑
3. 性能較好，有單例測試

3. main.js 分散處理

main.js 做爲操做入口，不少東西須要引入，代碼體積過大，須要進行優化，邏輯清晰，方便文虎

1. 處理三方框架

新建一個文件夾 plugin，存放全部須要引入的 main.js 掛載的組件、方法、第三方庫

1. ant-design.js
   按照官方推薦，按需引入
   優勢： 咱們開發項目不必定能使用到全部的組件，這樣引入減少項目體積

   import Vue from 'vue'
   import {
     ConfigProvider,
     Pagination,
     Steps,
     Cascader,
     Row,
     Col,
     Table
   } from 'ant-design-vue'
   import 'ant-design-vue/dist/antd.less'
   
   Vue.use(ConfigProvider)
   Vue.use(Steps)
   Vue.use(Cascader)
   Vue.use(Row)
   Vue.use(Col)
   Vue.use(Table)

2. func.js
   自定義的一些方法，掛到 vue 原型上

   import Vue from 'vue'
   import api from '@/request/api'
   import { isInvalid, isValid } from '@/utils/verify'
   // 請求接口
   Vue.prototype.$api = api
   // 驗證工具
   Vue.prototype.$isInvalid = isInvalid
   Vue.prototype.$isValid = isValid

   這樣，分散幾個文件，而後將他們統一引入到 index.js 中

   import './ant-design.js'
   import './func.js'
   import './moment'

   最後放入 main.js，整個世界都清晰簡單了

   `import './plugin'`

   2. 全局引入自定義組件

   收到評論區大神提醒，研究了一下 webpack 中的 require.context

   require.context 是 webpack 中，用來建立本身的（模塊）上下文

   webpack 會在構建的時候解析代碼中的 require.context()

   require.context(directory, useSubdirectories = false, regExp = /^/) 函數接收三個參數：

   要搜索的文件夾目錄
   是否還應該搜索它的子目錄
   以及一個匹配文件的正則表達式

   // 語法
   require.context(directory, useSubdirectories = false, regExp = /^\.\//);
   // 示例
   require.context('./test', false, /\.test\.js$/);

   因此，在 main.js 中，直接能夠註冊我全部的自定義組件，很是簡單

   // 自定義組件
   const requireComponents = require.context('@v/components', true, /\.vue$/)
   // 打印結果
   // 遍歷出每一個組件的路徑
   requireComponents.keys().map(fileName => {
     // 獲取組件配置
     const componentConfig = requireComponents(fileName)
     // 剝去文件名開頭的 `./` 和`.vue`結尾的擴展名
     const componentName = fileName.replace(/^\.\//, '').replace(/\.vue$/, '')
     // 全局註冊組件
     Vue.component(
       componentName.replace(/\//, '-'),
       // 若是這個組件選項是經過 `export default` 導出的，那麼就會優先使用 `.default`，不然回退到使用模塊的根。
       componentConfig.default || componentConfig
     )
   })

4. axios 請求二次封裝

axios 不過多介紹，上乾貨

1. 新建文件 axios

2. 請求攔截器
   根據本身業務需求，修改請求頭以及超時時間等

   import axios from 'axios'
   axios.interceptors.request.use(
     config => {
       // 判斷是不是提交文件，仍是常規請求
       if (config.data instanceof FormData) {
         config.headers = {
           'Content-Type': 'multipart/form-data' // 此處格式自定義
         }
       } else {
         config.data = JSON.stringify(config.data)
         config.headers = {
           'Content-Type': 'application/json', // 此處格式自定義
           token: getLocalStorage('token')
         }
       }
       config.withCredentials = true
       config.timeout = 5000    // 超時時間
       return config
     },
     error => {
       return Promise.reject(error)
     }
   )

3. 響應攔截器

根據後臺返回數據，作些統一處理

// 添加響應攔截器
axios.interceptors.response.use(
  res => {
    let data = res.data
    if (res.statusCode !== 200) {
      if (data.failureReason === 4011 || data.failureReason === 4012) {
        console.log('須要從新登陸')
      }
    } else {
      if (data.resultStates === 0) {
        return data
      } else {
        return Promise.reject(data)
      }
    }
  },
  error => {
    notification['error']({
      message: '提示',
      duration: 2,
      description: '後臺報錯'
    })
    // 對響應錯誤作點什麼
    return Promise.reject(error)
  }
)

1. 封裝get，post，並導出

   export function get (url, params = {}) {
     return new Promise((resolve, reject) => {
       axios
         .get(url, {
           params: params
         })
         .then(response => {
           if (response.success) {
             resolve(response.data)
           }
         })
         .catch(err => {
           reject(err)
         })
     })
   }
   
   /**
    * 封裝post請求
    * @param url
    * @param data

*/
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        if (response.success) {
          resolve(response.data)
        }
      },
      err => {
        reject(err)
      }
    )
  })
}
```

1. 重點：新建 api.js 文件

將後臺請求接口所有寫在此處，統一管理

import { get, post } from './axios'
const api = {
     reqLogin: p => post('api/user/addFormId', p),
      reqGetInfo: p => post('api/user/addFormId', p)
}
export default api

// 將 api 引入到 main.js 中
Vue.prototype.$api = api

// 這樣頁面中使用
this.$api.reqLogin().then(res => {
      console.log(res)
})

是否是很是方便？鼓掌 啪啪啪啪......

web 前端羣招人，有夢想的一羣小青年 https://www.jianshu.com/p/33eee1c26b8a