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的項目結構採用模塊化的方式進行組織，有助於分層管理，方便項目的維護和擴展。