vue3.0脚手架项目构建

package.json项目依赖

根据个人，或者项目的需求安装好用的第三方依赖。

 "dependencies": {
    "ant-design-vue": "^1.5.6",//ui框架
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "hashids": "^2.2.1",//路由加密
    "v-viewer": "^1.5.1",//图片预览
    "vue": "^2.6.11",
    "vue-lazyload": "^1.3.3",//图片懒加载
    "vue-ls": "^3.2.1",//本地存储的使用
    "vue-meta": "^2.3.3",//网页标签
    "vue-router": "^3.1.6",
    "vuex": "^3.1.3"
  },

vue.config.js的配置

用了配置我们代理，或者是移动端适配。

const pxtorem = require('postcss-pxtorem')
module.exports = {
  devServer: {
    open: true,
    proxy: {
      '/api': {
        // target: 'https://test.o***r.cn',
        target: 'http://sh**.che**.cn',
        ws: true,
        // 是否启用https
        secure: true,
        // 是否跨域
        changeOrigin: true
      }
    }
  },
  //把px传化为rem
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      },
      less: {
        javascriptEnabled: true
      }
    }
  }
}

axios的封装

封装axios的方法有很多中，网上也是一大推。这写出我用的。

import axios from 'axios'

const service = axios.create({
  timeout: 5000
})

service.interceptors.request.use(
)

service.interceptors.response.use(
  (response) => {
    return response
  }, error => {
    if (error.response.status === 400) {
      return Promise.reject(error.response)
    }
  }
)
export default service

项目搭建还有很多，怎么做路由请求拦截，在请求头中加入token。

请求拦截

新建一个文件夹，aixos.js

const VueAxios = {
  vm: {},
  // eslint-disable-next-line no-unused-vars
  install (Vue, instance) {
    if (this.installed) {
      return
    }
    this.installed = true

    if (!instance) {
      // eslint-disable-next-line no-console
      console.error('You have to install axios')
      return
    }

    Vue.axios = instance

    Object.defineProperties(Vue.prototype, {
      axios: {
        get: function get () {
          return instance
        }
      },
      $http: {
        get: function get () {
          return instance
        }
      }
    })
  }
}

export {
  VueAxios
}

在新建一个文件request.js

import axios from 'axios'
import notification from 'ant-design-vue/es/notification'
import { VueAxios } from './axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  timeout: 60000 * 3 // 请求超时时间（1分钟）
})
const err = (error) => {
  if (error.response) {
    const data = error.response.data
    if (error.response.status === 403) {
      notification.error({
        message: 'Forbidden',
        description: data.message
      })
    }
    if (error.response.status === 401 && !(data.result && data.result.isLogin)) {
      notification.error({
        message: '未授权',
        description: '您的授权验证失败'
      })
      localStorage.clear()
      sessionStorage.clear()
    }
  }
  return Promise.reject(error)
}

service.interceptors.request.use(config => {
  const token = JSON.parse((localStorage.getItem('access'))).value
  if (token) {
    config.headers.Authorization = `Bearer ${token}` // 让每个请求携带自定义 token 请根据实际情况自行修改
  }
  return config
}, err)

service.interceptors.response.use((response) => {
  return response
}, err)

const installer = {
  vm: {},
  install (Vue) {
    Vue.use(VueAxios, service)
  }
}

export {
  service as axios,
  installer as VueAxios
}