西安网站建设 至诚北京seo网站设计

需求：

目录

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'})