基本开辟环境

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