配置一个vue3.0项目的完整步骤

9.axios

我们在登录页要登录，这就涉及到了发ajax请求，这个我们使用axios

安装

D:testbook>yarn add axios

使用

在api文件夹下新建config.js文件，配置一些请求的通用选项，同时还对gei和post请求进一步封装。其实封装不封装都无所谓，我个人感觉封装后会省事一点。代码如下：

import axios from "axios"
import { Message } from "element-ui"
// 这个baseUrl要根据实际情况进行改变
axios.defaults.baseURL = "/"
axios.defaults.headers.common["Content-Type"] =
 "application/json; charset=UTF-8"
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*"
// 请求拦截器 添加token
axios.interceptors.request.use(
 config => {
 return config
 },
 error => {
 return Promise.reject(error)
 }
)
// 响应拦截器即异常处理
axios.interceptors.response.use(
 response => {
 return response
 },
 error => {
 Message({
  message: error.message,
  type: "error",
  duration: 5000,
 })
 return Promise.resolve(error)
 }
)
export default {
 // get请求
 get(url, param) {
 return new Promise((resolve, reject) => {
  axios({
  method: "get",
  url,
  params: param,
  })
  .then(res => {
   resolve(res)
  })
  .catch(error => {
   Message({
   message: error,
   type: "error",
   duration: 5000,
   })
   reject(error)
  })
 })
 },
 // post请求
 post(url, param) {
 return new Promise((resolve, reject) => {
  axios({
  method: "post",
  url,
  data: param,
  })
  .then(res => {
   resolve(res)
  })
  .catch(error => {
   Message({
   message: error,
   type: "error",
   duration: 5000,
   })
   reject(error)
  })
 })
 },
 // all get
 allGet(fnArr) {
 return axios.all(fnArr)
 },
}

在api的文件夹下新建login.js文件。这个函数的作用就是请求后台的login接口。

import service from './config'
class Login {
 login(params) {
 return service.post('login', params)
 }
}
export default new Login()

axios不用特别配置的，引入就可以用。现在问题来了，有了接口了，但是我们没有后台啊。我们没法做登录的功能。不过不用担心，现在的我们的前端已经很强大了。没有后端，我们可以使用mock来模拟后端。

10.设置eslint

在安装mock前，我们还有一个小问题要解决，就是设置eslint的规则，默认的eslint的规则很严格的，我们在页面甚至不能使用console.log() 这就会给我们的调试带来困难。因此我们要禁用一些eslint规则。