摘要：基本開(kāi)發(fā)環(huán)境創(chuàng)建的項(xiàng)目，作為代碼編寫(xiě)工具插件推薦插件配置文章目錄項(xiàng)目目錄結(jié)構(gòu)介紹框架選擇處理請(qǐng)求二次封裝項(xiàng)目目錄結(jié)構(gòu)簡(jiǎn)介業(yè)務(wù)相關(guān)靜態(tài)文件全局組件基礎(chǔ)樣式布局樣式及工具引入請(qǐng)求配置路由全局狀態(tài)管理工具文件入口文件主要配置文件頁(yè)面檢查配置測(cè)試

vue-cli3 創(chuàng)建的項(xiàng)目，vscode 作為代碼編寫(xiě)工具
vscode插件推薦：vscode 插件配置

項(xiàng)目目錄結(jié)構(gòu)介紹
UI 框架選擇
main,js 處理
axios 請(qǐng)求二次封裝

├── public // index.html
├── src // 業(yè)務(wù)相關(guān)
│ ├── assets // 靜態(tài)文件(css, images)
│ ├── components // 全局組件
│ ├── layouts // 基礎(chǔ)樣式布局
│ ├── plugin // 樣式及工具引入
│ ├── request // 請(qǐng)求配置
│ ├── router // 路由
│ ├── store // 全局狀態(tài)管理
│ ├── utils // 工具文件
│ ├── app.vue // 入口文件
│ ├── main.js // 主要配置文件
│ └── views // 頁(yè)面
├── .eslintrc.js // eslint 檢查配置
├── .env.release // 測(cè)試環(huán)境變量
├── .env.pre-build // 預(yù)發(fā)環(huán)境變量
└── vue.config.js // webpack 打包配置

經(jīng)框架選擇驗(yàn)證對(duì)比 element，iview，ant-design-vue
最終選擇 ant-design-vue，傳送門(mén) https://vue.ant.design/docs/vue/introduce-cn/

優(yōu)點(diǎn)：

好看



文檔清晰
使用方便，示例清晰

bug少，組件使用順滑
性能較好，有單例測(cè)試

main.js 作為操作入口，很多東西需要引入，代碼體積過(guò)大，需要進(jìn)行優(yōu)化，邏輯清晰，方便文虎

1. 處理三方框架

新建一個(gè)文件夾 plugin，存放所有需要引入的 main.js 掛載的組件、方法、第三方庫(kù)

ant-design.js
按照官方推薦，按需引入
優(yōu)點(diǎn)： 我們開(kāi)發(fā)項(xiàng)目不一定能使用到所有的組件，這樣引入減小項(xiàng)目體積

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)

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

import Vue from "vue"
import api from "@/request/api"
import { isInvalid, isValid } from "@/utils/verify"
// 請(qǐng)求接口
Vue.prototype.$api = api
// 驗(yàn)證工具
Vue.prototype.$isInvalid = isInvalid
Vue.prototype.$isValid = isValid

這樣，分散幾個(gè)文件，然后將他們統(tǒng)一引入到 index.js 中

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

最后放入 main.js，整個(gè)世界都清晰簡(jiǎn)單了

`import "./plugin"`

2. 全局引入自定義組件

收到評(píng)論區(qū)大神提醒，研究了一下 webpack 中的 require.context

require.context 是 webpack 中，用來(lái)創(chuàng)建自己的（模塊）上下文

webpack 會(huì)在構(gòu)建的時(shí)候解析代碼中的 require.context()

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

要搜索的文件夾目錄
是否還應(yīng)該搜索它的子目錄
以及一個(gè)匹配文件的正則表達(dá)式

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

所以，在 main.js 中，直接可以注冊(cè)我所有的自定義組件，非常簡(jiǎn)單

// 自定義組件
const requireComponents = require.context("@v/components", true, /.vue$/)
// 打印結(jié)果
// 遍歷出每個(gè)組件的路徑
requireComponents.keys().map(fileName => {
  // 獲取組件配置
  const componentConfig = requireComponents(fileName)
  // 剝?nèi)ノ募_(kāi)頭的 `./` 和`.vue`結(jié)尾的擴(kuò)展名
  const componentName = fileName.replace(/^.//, "").replace(/.vue$/, "")
  // 全局注冊(cè)組件
  Vue.component(
    componentName.replace(///, "-"),
    // 如果這個(gè)組件選項(xiàng)是通過(guò) `export default` 導(dǎo)出的，那么就會(huì)優(yōu)先使用 `.default`，否則回退到使用模塊的根。
    componentConfig.default || componentConfig
  )
})

axios 不過(guò)多介紹，上干貨

新建文件 axios

請(qǐng)求攔截器
根據(jù)自己業(yè)務(wù)需求，修改請(qǐng)求頭以及超時(shí)時(shí)間等

import axios from "axios"
axios.interceptors.request.use(
  config => {
    // 判斷是否是提交文件，還是常規(guī)請(qǐng)求
    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    // 超時(shí)時(shí)間
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

響應(yīng)攔截器

根據(jù)后臺(tái)返回?cái)?shù)據(jù)，做些統(tǒng)一處理

// 添加響應(yīng)攔截器
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: "后臺(tái)報(bào)錯(cuò)"
    })
    // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
    return Promise.reject(error)
  }
)

封裝get，post，并導(dǎo)出

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請(qǐng)求
 * @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)
      }
    )
  })
}
```

重點(diǎn)：新建 api.js 文件

將后臺(tái)請(qǐng)求接口全部寫(xiě)在此處，統(tǒng)一管理

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

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

是不是非常方便？鼓掌 啪啪啪啪......

web 前端群招人，有夢(mèng)想的一群小青年 https://www.jianshu.com/p/33eee1c26b8a