Vue3 项目搭建后，如何配置路由、状态管理、HTTP 请求和 UI 组件库

安装所需的依赖包

在项目根目录下打开命令行工具，执行以下命令安装所需的依赖包：

yarn add vue-router vuex axios

其中，vue-router 是 Vue 的路由插件，vuex 是 Vue 的状态管理插件，axios 是用于发送 HTTP 请求的插件。如果还需要其他的依赖包，可以继续安装。

配置路由

在项目的 src 目录下创建一个 router 目录，在该目录下创建一个 index.js 文件，用于配置路由。具体操作如下：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

上述代码中，我们首先引入了 createRouter 和 createWebHistory 方法，用于创建路由实例和路由历史对象。然后，定义了一个 routes 数组，用于配置路由映射关系。在该数组中，我们定义了一个默认路由，指向 Home.vue 组件。最后，我们使用 createRouter 方法创建了一个路由实例，并通过 export 导出了该实例。

配置状态管理

在项目的 src 目录下创建一个 store 目录，在该目录下创建一个 index.js 文件，用于配置状态管理。具体操作如下：

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  modules: {
  }
})

上述代码中，我们首先引入了 createStore 方法，用于创建状态管理实例。然后，定义了一个 state 对象，用于存放状态数据。在 mutations 对象中，定义了一个 increment 方法，用于更新 count 数据。在 actions 对象中，定义了一个 increment 方法，用于提交 increment 方法。最后，我们通过 export 导出了该实例。

配置 HTTP 请求

在项目的 src 目录下创建一个 api 目录，在该目录下创建一个 index.js 文件，用于配置 HTTP 请求。具体操作如下：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000'

export default {
  get(url, params) {
    return axios.get(url, { params })
  },
  post(url, data) {
    return axios.post(url, data)
  },
  put(url, data) {
    return axios.put(url, data)
  },
  delete(url) {
    return axios.delete(url)
  }
}

上述代码中，我们首先引入了 axios 插件，并设置了默认的请求地址。然后，定义了一个对象，包含了 get、post、put 和 delete 四个方法，用于发送不同类型的 HTTP 请求。最后，我们通过 export 导出了该对象。

配置 Element Plus

如果你想使用 Element Plus 组件库，需要先安装该插件。具体操作如下：

yarn add element-plus

然后在 main.js 文件中引入 Element Plus 插件，并按需引入所需的组件。例如：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(router)
app.use(store)
app.use(ElementPlus)

app.mount('#app')

上述代码中，我们首先引入了 ElementPlus 插件，并引入了 index.css 样式文件。然后，使用 app.use 方法注册 Element Plus 插件，并使用 app.mount 方法挂载 Vue 应用。