Vue3项目架构设计与核心模块实战指南

1. Vue3 项目第二天实战要点解析

今天继续我们的Vue3实战系列，主要聚焦于项目核心架构的搭建和基础功能的实现。经过第一天的环境准备和项目初始化，现在我们已经有了一个干净的Vue3项目骨架，接下来要开始往里面填充血肉了。

在真实的项目开发中，第二天通常是最关键的架构定型期。我们需要完成路由配置、状态管理初始化、API服务封装等基础建设，这些工作将直接影响后续的开发效率和项目可维护性。我见过太多项目因为前期架构设计不合理，导致后期难以扩展和维护，所以今天的内容虽然基础，但非常重要。

2. 项目架构设计与核心模块搭建

2.1 路由系统配置与优化

首先我们来配置项目路由。Vue Router 4.x版本针对Vue3做了全面优化，使用方式也有了一些变化：

javascript复制// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true // 路由元信息，用于权限控制
    }
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue') // 路由懒加载
  }
]

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

// 全局路由守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 这里可以添加权限验证逻辑
    next()
  } else {
    next()
  }
})

export default router

几个关键点需要注意：

1. 使用createRouter替代原来的new Router
2. 路由模式从mode: 'history'改为createWebHistory
3. 组件导入方式支持直接使用import()实现懒加载
4. 路由守卫的用法基本保持不变

提示：在大型项目中，建议将路由配置拆分为多个模块，然后在主路由文件中合并，这样更易于维护。

2.2 状态管理方案选型与实现

对于状态管理，Vue3提供了多种选择。对于中小型项目，可以使用reactive或ref创建响应式对象；对于大型项目，建议使用Pinia（Vuex的替代方案）。

这里我们使用Pinia作为状态管理方案：

javascript复制// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    user: null
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    },
    async fetchUser(userId) {
      const user = await api.fetchUser(userId)
      this.user = user
    }
  }
})

然后在main.js中安装Pinia：

javascript复制import { createPinia } from 'pinia'

const app = createApp(App)
app.u