一、Vue3项目结构概述
Vue3在项目结构方面沿用了Vue2的思想，将项目分为组件、路由、状态管理、API请求等几个模块。这些模块以文件夹的形式进行组织，有助于开发者对项目进行分层管理，便于增强代码可维护性和扩展性。
说了这么多，应该来看看Vue3的项目结构是怎样的：
my-project
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── robots.txt
├── src
│ ├── api
│ ├── assets
│ ├── components
│ ├── router
│ ├── store
│ ├── utils
│ ├── views
│ ├── App.vue
│ └── main.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js
项目中有两个主要的文件夹，分别是public和src。其中，public目录存放的是公共静态资源，例如index.html，favicon.ico等。src目录存放的是项目的源代码。
二、组件模块
Vue3中，组件是项目的重要组成部分。组件模块主要存放的是封装好的Vue组件。
在组件模块中，我们可以根据业务需求，在components目录下建立一个或多个子目录，如：
components
├── common //常用组件
├── layout //布局组件
├── views //业务组件
├── test //测试组件
├── index.js //导出所有自定义组件
├── README.md //组件介绍
index.js文件是组件的入口文件，将不同的组件导出，示例代码如下：
//example.js
import Header from "./Header.vue"
import Aside from "./Aside.vue"
import Footer from "./Footer.vue"
export default {
Header,
Aside,
Footer
}使用时只需导入该文件即可，代码如下：
<template>
<div>
<Header />
<Aside />
<Footer />
</div>
</template>
<script>
import example from "components/test/index.js";
export default {
components: {
...example
},
//其他
}
</script>三、路由模块
路由模块主要存放的是前端路由相关的配置文件。在Vue3中我们可以使用Vue Router 4.x.x 版本做路由管理，将路由配置分散到各个子模块中，代码如下：
router
├── index.js
├── modules
│ ├── home.js
│ ├── about.js
│ ├── news.js
│ └── user
│ ├── index.js
│ ├── profile.js
│ └── setting.js
└── README.md其中，index.js是路由的入口文件，示例代码如下：
//index.js
import { createRouter, createWebHashHistory } from "vue-router";
//导入模块路由
import homeRouter from "./modules/home";
import aboutRouter from "./modules/about";
import newsRouter from "./modules/news";
import userRouter from "./modules/user";
//创建路由
const router = createRouter({
history: createWebHashHistory(),
routes: [
homeRouter,
aboutRouter,
newsRouter,
userRouter
],
});
export default router;每个模块中的路由配置代码如下：
//home.js
const homeRouter = {
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
};
export default homeRouter;使用时，只需在目标页面上添加<router-view>标签，路由会根据路由配置自动渲染页面。
四、状态管理模块
状态管理模块主要存放的是全局状态相关的配置文件。在Vue3中，我们可以使用Vuex 4.x.x 版本来实现全局状态的管理，将状态管理分散到不同的子模块中，代码如下：
store
├── index.js
├── modules
│ ├── user.js
│ ├── cart.js
│ └── index.js
└── README.md其中，index.js是状态管理的入口文件，示例代码如下：
//index.js
import { createStore } from 'vuex'
import cart from './modules/cart.js'
import user from './modules/user.js'
const store = createStore({
modules: {
cart,
user
},
})
export default store;每个子模块中的状态配置代码如下：
//cart.js
const state = {
cartList: [],
}
const mutations = {
addCart(state, payload) {
state.cartList.push(payload)
}
}
const actions = {
addCart(context, payload) {
context.commit('addCart', payload)
}
}
export default {
state,
mutations,
actions
}使用时，只需在需要使用状态管理中的组件中，使用Vuex提供的useStore函数即可获取store对象，方便对状态进行操作。
五、API请求模块
API请求模块主要存放的是与后端API交互的相关文件。在Vue3中，可以使用axios等第三方库或自己封装的API请求库来进行数据请求，示例代码如下：
api
├── http.js
├── modules
│ └── user.js
└── README.md其中，http.js是封装好的API请求库，代码如下：
//http.js
import axios from 'axios'
const service = axios.create({
baseURL: 'http://localhost:3000/api/',
timeout: 5000,
})
// request拦截器
service.interceptors.request.use(
config => {
//其他操作
return config
},
error => {
console.log(error)
return Promise.reject(error)
}
)
// response拦截器
service.interceptors.response.use(
response => {
//其他操作
return response
},
error => {
console.log(error)
return Promise.reject(error)
}
)
export default service每个子模块中的API请求代码如下：
//user.js
import http from "@/api/http.js";
const userApi = {
getUserInfo(params) {
return http.post("user/getUserInfo", params);
},
};
export default userApi;使用时，只需要导入需要请求的API并调用对应的函数即可。
六、总结
本文从组件、路由、状态管理、API请求等四个方面对Vue3项目结构做了详细的阐述，并给出了相应的代码示例。Vue3的项目结构采用模块化的方式进行组织，有助于分层管理，方便项目的维护和扩展。
