vue-cli4+ant-design-vue项目开发遇到的坑

1.环境配置

//在根目录添加.env

VUE_APP_BASE_API = "http://xxxxxxxx.com"

//在request中创建service

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 90000 // 请求超时时间
})

2.request中无法使用message

//在main中单独注册message

import { message } from 'ant-design-vue'

3.request拦截器

service.interceptors.request.use(
      config => {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
        return config
      },
      error => {
        Promise.reject(error)
      }
    )
service.interceptors.response.use(
  response => {
    //code为非0是抛错 可结合自己业务进行修改
    const res = response.data
    if (res.code !== 0) {
      message.warn(`${res.message}`)
      if (res.code === -2) {
        //token过期返回登录页
        message.warn(`${res.message}`)
        window.location.href = '/'
        removeToken() //清空token
      }
      return Promise.reject(res)
    } else {
      return res
    }
  },
  error => {
    return Promise.reject(error)
  }

4.使用form data传参

//在utils中封装参数

export function getParams(data) {
  let ret = ''
  for (let it in data) {
    ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  ret = ret.substring(0, ret.lastIndexOf('&'))
  return ret
}

//api封装请求

export function getList(params) {
  return request({ url: '/', method: 'post', data: params })
}

//接口请求

let params = getParams(values)
login(params)
  .then(res => {
    if (res.code == 0) {
      this.$store.commit('SET_TOKEN', res.data.token)
      this.$store.commit('SET_NAME', res.data.userName)
      this.$router.push({ path: '/list' })
    }
  })
  .catch(res => console.log('aaa'))

5.router路由守卫

在router中

const routes = [
  { path: '/', name: 'Login', component: Login },
  {
    path: '/list',
    name: 'List',
    meta: { needLogin: true },
    component: () => import('')
  }
]
router.beforeEach(function (to, from, next) {
  if (to.meta.needLogin) {
    //从cookie中获取用户信息，判断是否已登录
    if (getToken()) {
      next() //表示已经登录
    } else {
      //未登录
      //next可以传递一个路由对象作为参数 表示需要跳转到的页面
      next({
        name: 'Login',
        query: { redirect: to.meta.redirect } //登录后再跳回此页面时要做的配置
      })
    }
  } else {
    //表示不需要登录
    next() //继续往后走
  }
})

6.使用ant-design-vue中form表单

需要在data中创建form

data() {
  return {
     form: this.$form.createForm(this, { name: 'login' }),
  }
}

7.使用less开发需要在style中声明

<style lang="less"></style>

8.for循环需要绑定key值，否则控制台vue warn警告

<li
  :class="{ item: item.name_cn }"
  v-for="item in firstArea"
  :key="item.seatnum"
>
 <a @click="goBu(item)" :class="{star:item.is_bu_master==1}">{{item.name_cn}}</a>
 </li>

9.引用组件，需要声明

import Member from './member'

export default {name: 'TableSeat',components: {Member},}