Vue3项目结构详解

一、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的项目结构采用模块化的方式进行组织，有助于分层管理，方便项目的维护和扩展。