一、路由router
1、安装路由
npm install vue-router@next -S -D （注：-s是保存在dependencies中，是要发布到正式环境中的。-d是保存在devDependencies中，只用于开发环境）
2、配置路由
目录： /src/router/index.js
import {createRouter, createWebHashHistory,createWebHistory }from 'vue-router';
const router =createRouter({
history:createWebHistory(),
routes: [
// @ 是 /src 的别名
{path:'/name', component: () =>import('../components/HelloWorld.vue') }
]
})
export default router
3、配置 main.js
import router from "@/router"
createApp(App).use(router).mount('#app')
4、使用
<router-link to="/name">路由跳转 </router-link>
<router-view></router-view>
二、状态管理vuex
1、安装vuex
npm install vuex@next -S -D
2、配置vuex
import {createStore }from 'vuex'
const store =createStore({
state: {
count:10
}
})
export default store
3、配置 main.js
import store from './store'
const Appcreate=createApp(App)
Appcreate.use(store)
4、使用
import store from '../store/index.js'
<h2>{{store.state.count}}</h2>
三、数据请求封装
1、安装axios
npm install axios -S -D
2、配置生产环境文件
在根目录下添加配置文件 .env.development
VITE_APP_BASE_API= '请求的 baseURL'
注意：修改该文件后需要重启项目。
3、请求封装
目录：utils/request.js
import axios from 'axios'
// 创建 axios 实例
const service = axios.create({
// 在请求地址前面加上 baseURL
baseURL: import.meta.env.VITE_APP_BASE_API,
// 请求超时时间
timeout: 5000
})
// 请求拦截
service.interceptors.request.use(
(config) => {
// 在请求前做某些事情
return config
},
(error) => {
// 处理请求错误
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response) => {
// 响应成功
return response
},
(error) => {
// 处理响应错误
return Promise.reject(error)
}
)
export default service
4、封装第一个接口
目录：api/user.js
import service from '@/utils/request.js'
export const getUsers = (params) => {
return service({
url: '/getUsers',
method: 'get',
params
})
}
