Vue创建项目

1、创建项目

npm install -g @vue/cli

vue create xx

cd xx

npm run serve

2、创建路由

npm install --legacy-peer-deps vue-router@3.5.2 （这是vue2的路由）

npm install vue-router@4（这是vue3的路由）

        在src目录下新建router

        在router目录下新建index.js

3、下载api axios （调接口）

 npm install --save axios vue-axios

        在src目录下新建request

        在request目录下新建request.js(请求拦截),api.js(封装接口)

4.这是request.js请求拦截

//封装响应拦截
// 对axios进行二次封装
import axios from "axios";
// 创建axios 实例
const requests = axios.create({
    baseURL: 'https://api.uomg.com',//(请求地址)
    timeout: 5000
});
// 请求拦截器 请求头 token ticket
requests.interceptors.request.use(config => {
    return config; // 请求头 密钥
});
// 响应拦截器
//errcode 10001 10002 10003 
requests.interceptors.response.use(result => {
    switch (result.code) {
        case 10001: console.log('未登录');
            break;
        case 10002: console.log('系统错误处理异常');
            break;
        case 10003: console.log('记录不存在');
            break;
        default: break;
    }
    return result.data
}, error => {
    console.log(error); // 失败之后
})
export default requests

5、api.js(封装接口)

//封装接口
//导入request文件
import request from './request'
//定义 一个常量封装api
const api = {
    //getLove定义的接口函数变量 
    //data需要传的参数 
    // url 接口路径 
    // method 请求方式 
    getLove(data) { return request({ url: '/api/rand.qinghua', method: 'post', data }) },
}
//导出api
export default api;

6、main.js(引入)

//引入api
import api from './request/api'
Vue.prototype.$http = api
console.log('vue实例', Vue.prototype);

7、vue页面调用接口

this.$http.getLove({
    format: "1",
}).then((res) => {
    console.log("res", res);
}).catch((err) => {
    console.log("err", err);
});