一、路由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

  })

}