基本开发环境

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 作为操作入口，很多东西需要引入，代码体积过大，需要进行删减

    import Vue from 'vue'import App from './App.vue'import router from '@/router'import store from '@/store'import * as filters from '@/utils/filters'   // 全局过滤器import './plugin'    // 引入操作集合import './assets/css/index.less'  // 样式集合Vue.config.productionTip = false// 全局过滤器Object.keys(filters).forEach(key => {  Vue.filter(key, filters[key])})// 非父子组件传值公交车Vue.prototype.$bus = new Vue()new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

    这样通过几个集合，来分散引入各个模块

    1. 样式模块 (import './assets/css/index.less' // 样式集合)
    @import './atom.less';@import './global.less';@import './reset.less';
    1. 操作模块 (import './plugin/index.js' // 引入操作集合)
    import './custom.js'import './ant-design'import './tools'// tools.jsimport Vue from 'vue'import moment from 'moment'import 'moment/locale/zh-cn'import api from '@/request/api'import { isInvalid } from '@/utils/verify'// 自定义组件moment.locale('zh-cn')// 请求接口Vue.prototype.$api = api// 验证工具Vue.prototype.$isInvalid = isInvalidVue.prototype.$moment = moment// ant-design.js 按需引入import Vue from 'vue'import {  Layout,  Spin,  Button,  Icon,  Avatar,  Select,  Drawer,  Menu,  Form,  LocaleProvider,  Dropdown,  Divider,  Modal,  Input,  Tooltip,  notification,  Popover,  ConfigProvider,  Pagination,  Steps,  Cascader,  Row,  Col} from 'ant-design-vue'import 'ant-design-vue/dist/antd.less'Vue.use(Layout)Vue.use(Spin)Vue.use(Button)Vue.use(Icon)Vue.use(Avatar)Vue.use(Select)Vue.use(Popover)Vue.use(Form)Vue.use(Drawer)Vue.use(Menu)Vue.use(LocaleProvider)Vue.use(Dropdown)Vue.use(Modal)Vue.use(Input)Vue.use(Divider)Vue.use(notification)Vue.use(Pagination)Vue.use(Tooltip)Vue.use(ConfigProvider)Vue.use(Steps)Vue.use(Cascader)Vue.use(Row)Vue.use(Col)

    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)  })
    1. 响应拦截器

    根据后台返回数据，做些统一处理

    // 添加响应拦截器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 * @returns {Promise} */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