需求：
目录
1.配置路由
2.less使用 vue2使用以下版本
3.axios二次封装
1.配置路由
1.1.1 官方链接：安装 | Vue Router
npm i vue-router@3.6.5
注意：vue2项目不能用vue-router四版本以上
1.2.1.创建router/index.js
在该文件中
//1.引入 vue和vueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'
//2.使用插件
Vue.use(VueRouter)
import Hello from "../views/Hello"
import Home from "../views/Home"
//3.对外暴露
export default new VueRouter({
routes: [
{
path:"/home",
component:Home
},
{ path: '/hello',
component: Hello
},
]
})1.3.1在main.js中配置 创建和挂载根实例
1.4.1如何使用呢？
1.4.1.声明式导航
<template>
<div id="app">
//声明式导航
<router-link to="/home">gotohome</router-link>
<router-link to="/hello">gotohello</router-link>
//出口文件 显示在哪里
<router-view></router-view>
</div>
</template>1.4.2.编程式导航
2.less使用 vue2使用以下版本
npm i less@4.1.2
npm i less-loader@6.0.0
<style lang="less">
3.axios二次封装
3.1.1 npm install axios
3.1.2创建api文件夹
和request.js
3.1.3 requst.js 文件如下
// 二次封装axios
import axios from "axios"
// 创建axios对象
const request =axios.create({
baseURL:'/api',
timeout:5000,
})
// 请求拦截器，在请求发出前做事情
request.interceptors.request.use((config)=>{
// config:配置对象，对象里面有请求头
return config
})
// 响应拦截器，
request.interceptors.response.use((res)=>{
return res.data;
},(error)=>{
return Promise.reject(new Error('faile'))
})
export default request;
3.2.1api中的index.js文件配置
import request from "./request";
// 请求首页数据
// export const getData=()=>{
// return request.get('/home/getData')
// }
// export const getData2=()=>{request({method:"get", url:'/home/getData'})}
export const getData=()=>request({method:"get", url:'/home/getData'})
