Vue大型项目组件化与模块化设计

大型Vue项目需建立清晰的模块化架构，下面梳理核心设计原则。

模块化架构设计

业务模块划分

modules/
├── user/           # 用户模块
│   ├── api.js      # 接口
│   ├── store.js    # 状态
│   ├── routes.js   # 路由
│   └── components/ # 模块私有组件
├── order/          # 订单模块
│   ├── api.js
│   ├── store.js
│   ├── routes.js
│   └── components/
└── dashboard/      # 仪表盘模块
    ├── api.js
    ├── store.js
    ├── routes.js
    └── components/

按业务领域划分模块，每个模块包含完整的API、Store、Routes、Components。

状态模块化

Pinia模块设计

// store/modules/user.js
import { defineStore } from 'pinia'
import { userApi } from '@/modules/user/api'

export const useUserStore = defineStore('user', {
  state: () => ({
    userInfo: null,
    permissions: [],
    token: localStorage.getItem('token')
  }),
  
  getters: {
    isLoggedIn: (state) => !!state.token,
    isAdmin: (state) => state.permissions.includes('admin')
  },
  
  actions: {
    async login(credentials) {
      const { token } = await userApi.login(credentials)
      this.token = token
      localStorage.setItem('token', token)
    },
    
    async fetchUserInfo() {
      this.userInfo = await userApi.getProfile()
      this.permissions = this.userInfo.permissions
    },
    
    logout() {
      this.$reset()
      localStorage.removeItem('token')
    }
  }
})

模块注册

// store/index.js
import { createPinia } from 'pinia'
import { useUserStore } from './modules/user'
import { useOrderStore } from './modules/order'

export const pinia = createPinia()

// 按需注册模块
export { useUserStore, useOrderStore }

插件化架构

插件注册中心

// plugins/index.js
import { errorHandler } from './errorHandler'
import { globalErrorHandler } from './globalErrorHandler'
import { i18n } from '@/i18n'
import { router } from '@/router'
import { permission } from '@/directives/permission'

export const registerPlugins = (app) => {
  // 基础设施插件
  app.use(errorHandler)
  app.use(globalErrorHandler)
  
  // 功能插件
  app.use(i18n)
  app.use(router)
  
  // 全局指令
  app.directive('permission', permission)
}

自定义插件开发

// plugins/storage.js
export const storagePlugin = {
  install(app, options = {}) {
    const prefix = options.prefix || 'app_'
    
    const storage = {
      get: (key) => {
        const value = localStorage.getItem(`${prefix}${key}`)
        try {
          return JSON.parse(value)
        } catch {
          return value
        }
      },
      set: (key, value) => {
        localStorage.setItem(`${prefix}${key}`, JSON.stringify(value))
      },
      remove: (key) => localStorage.removeItem(`${prefix}${key}`)
    }
    
    app.config.globalProperties.$storage = storage
    app.provide('storage', storage)
  }
}

模块依赖管理

依赖关系图

基础设施层 (utils, api, plugins)
      ↓
业务模块层 (user, order, dashboard)
      ↓
页面组件层 (views)

模块间依赖应单向向下，禁止循环依赖与横向耦合。

模块化设计对比

要点总结

• 按业务领域划分模块，每个模块包含完整的技术栈
• 状态管理使用Pinia模块化，避免单一store膨胀
• 插件采用注册中心模式，统一管理安装顺序
• 模块间保持单向依赖，基础设施层不依赖业务层
• 大型项目建议采用混合模式，兼顾复用与职责清晰

存放路径: articles/VUE/专家/大型项目架构分层设计/组件化与模块化设计.md