Vue3组件化开发实战：从脚手架搭建到工程落地

1. 组件化编程的认知重构与脚手架的价值

先说点实在的。很多人学Vue，前一周还在看模板语法、指令、计算属性，一到"组件化"这三个字就懵了——组件到底是什么？为什么要拆？拆到什么程度算合理？说白了，组件化就是把页面当成乐高积木来拼，每一块积木负责自己的样子和行为，积木和积木之间通过规定的接口互相协作。你不再写一个三千行的巨型页面，而是写十几个各司其职的小模块，每个模块又能单独测试、单独复用、单独维护，这就是组件化的核心价值。

那脚手架又是干什么的？如果你是手动从零搭Vue项目，光配置webpack/vite、Babel、ESLint、开发服务器就得折腾一两天，而且配置错了还不好排查。脚手架的本质就是把这一整套工程化的基础设施给你预装好，你拿到手就是一个能直接跑、能直接写代码的干净项目。Vue官方现在主推的create-vue脚手架，底层是基于Vite的，冷启动速度快到离谱，热更新也是毫秒级，开发体验比老一代的webpack方案舒服太多。

这篇文章适合什么人看？刚学完Vue基础语法、准备进入组件化开发阶段的新手，或者已经在用Vue但一直"会写不会讲"、想把自己的组件化思路理顺的开发者。我会从最核心的组件设计思路开始讲，再带你完整过一遍Vue脚手架的创建、目录结构、路由配置，以及实际开发中一定会踩的坑。学完你至少能独立搭建一个结构清晰、可维护性达标的Vue3工程。

2. 组件拆分的核心逻辑与设计思路

2.1 为什么要拆组件：维护成本的现实账

我先算一笔账。假设一个后台管理页面有表格、搜索表单、分页、弹窗、详情抽屉这五块内容，你全部写在一个文件里，初期可能三四百行，还能撑住。但业务一旦开始迭代——表格加几列、搜索条件加两个下拉、弹窗再加个嵌套表单——这个文件会迅速膨胀到上千行。到那个时候，你改一个表格列配置都要在密密麻麻的代码里翻半天，git冲突概率直线上升，新同事接手更是无从下手。

拆成组件之后情况完全不同。搜索表单是独立的SearchForm.vue，表格是DataTable.vue，弹窗是DetailDialog.vue，每个文件最多一两百行，职责单一，谁负责哪块一目了然。改表格逻辑不会影响到搜索区，测试哪个组件就单独跑哪个组件，配合Vite的热更新基本做到"改哪看哪"。

我自己的经验是，判断一个模块要不要拆成组件，主要看三个信号：是否在多个页面重复出现、单个文件是否超过300行、内部是否有相对独立的业务闭环。三个条件满足任意两个，就值得拆。不要为了追求文件数量而硬拆，一个只有一句话的模板没必要单独成一个组件，过度拆分反而增加组件间的通信成本。

2.2 组件分类：容器组件与展示组件

在真实项目中，我习惯把组件分成两类：容器组件（也叫聪明组件）和展示组件（也叫哑组件）。这个区分非常实用，能直接决定你的组件是否容易被复用。

容器组件负责"业务逻辑"——发请求、处理数据、维护状态，它知道数据从哪来、要干什么。展示组件只负责"长得好看"——接收props，把数据渲染出来，用户做了什么操作就通过事件向外抛，自己不存业务数据。

举个例子：一个用户列表页面，UserList.vue是容器组件，负责调用接口、管理userList数组、处理加载状态；UserTable.vue是展示组件，只接收userList这个prop，把表格渲染出来，点击编辑按钮时emit('edit', row)通知父组件。这样设计的直接好处是，以后换一套后端接口，只需要改容器组件，表格的展示逻辑一行不用动；如果另一个页面也要展示相似表格，直接把UserTable.vue拿过去复用就行。

这个思路用一句大白话讲：让组件各司其职，别让一个组件既当爹又当妈。

2.3 组件通信方案选型：按场景用量级决定

组件拆好了，接下来最关键的问题就是通信。Vue3的通信方式比Vue2更丰富，选择多了反而容易踩坑。我第一次从Vue2转Vue3时，习惯性地想用事件总线，结果发现Vue3移除了$on/$off，事件总线的生态一下子变得尴尬。好在Vue3官方推荐了更清晰的路子。

先看一张我平时做技术选型时参考的对照表：

props和emit是组件通信的基础，这个必须吃透。父组件通过:user-list="userList"往下传，子组件用defineProps声明接收，修改数据只能通过emit('update:user-list', newVal)通知父组件改，这就是单向数据流——数据流向清晰，调试的时候顺着方向查就行。

跨层级的场景，比如根组件给三层以下的孙组件传一个主题色，用provide/inject最合适。父组件provide('themeColor', themeColor)，中间任何层级的组件都能用inject('themeColor')直接拿到，不用一层层props转发。这里要注意，provide的值默认不是响应式的，如果你想动态更新，需要传一个ref对象或者使用computed，这个细节我第一次用的时候踩了坑，排查了半天为什么主题色不跟着变。

至于全局状态，我的建议是：项目里有多个页面共享用户登录信息、购物车数据、权限标识这类状态时，直接上Pinia。不要为了"少装一个库"而硬用props跨十几个层级传递，那会让代码维护变得极其痛苦。

3. 从零用Vue脚手架搭建工程

3.1 环境准备：Node.js 版本与 npm 镜像

动手创建项目之前，先把环境弄利索。Vue3 + Vite 这条技术栈对 Node.js 版本有硬性要求，Vite 5 需要 Node 18+，Vite 6 需要 Node 18.17+ 或 20+。如果你还在用 Node 14/16，创建项目的时候会直接报错，提示版本不满足要求。所以第一步，先检查你的Node版本：

node -v npm -v

如果版本偏低，去Node官网下载最新的LTS版本装上就行。这里我给个实操建议：装Node的时候顺手把nvm（Node Version Manager）也装上，它是Node的版本管理器，以后项目多了经常需要在不同Node版本之间切换，nvm一条命令就能搞定，省去反复卸载安装的麻烦。

然后是npm镜像的问题。国内直接跑npm install经常慢到让人怀疑人生，甚至直接卡死。解决办法是配置淘宝镜像源，国内开发者应该都懂：

npm config set registry https://registry.npmmirror.com

配置完之后可以用npm config get registry确认是否生效。这一步做得好，后面安装依赖能节省大量时间。

3.2 create-vue 创建项目与交互式选项解读

环境没问题了，就可以用官方脚手架create-vue创建项目。直接跑：

npm create vue@latest

这个命令会自动拉取最新版的create-vue，然后在终端里出现一系列交互式提问，类似于一个"项目功能选配向导"。以下是常见的选项和我的选择建议：

选完之后脚手架会自动生成一个完整的项目，然后按照终端的提示，依次执行：

cd your-project-name npm install npm run dev

几秒钟后终端会输出一个本地访问地址，一般是http://localhost:5173，浏览器打开就能看到Vue官方的欢迎页面，这说明你的脚手架已经跑起来了。

我提一个很多新手会忽略的点：npm create vue@latest里的@latest不是装饰，它明确指定拉取最新版本，避免npm缓存里有过期的旧版本。如果你之前跑过老版本，建议加上@latest强制拉新，不然可能创建出Vite 2时代的老项目。

3.3 项目结构逐层拆解与职责说明

脚手架生成的目录结构看起来很复杂，其实拆开看非常清晰。我逐个讲解每个目录和文件的用途，这是理解工程化的第一课。

your-project-name/ ├── node_modules/ # 项目依赖包目录，npm install 生成的 ├── public/ # 公共资源目录，不会被构建工具处理 │ └── favicon.ico # 浏览器标签页图标 ├── src/ # 源码目录（开发的主战场） │ ├── assets/ # 静态资源，图片、样式等，会被构建工具处理 │ ├── components/ # 公共组件目录 │ ├── router/ # 路由配置目录 │ │ └── index.js # 路由实例与路由表 │ ├── stores/ # Pinia 状态管理目录 │ │ └── counter.js # 示例状态下 │ ├── views/ # 页面级组件目录 │ │ └── HomeView.vue │ ├── App.vue # 应用根组件，所有组件树的根 │ └── main.js # 应用入口文件，创建应用实例并挂载 ├── index.html # Vite 的入口 HTML 文件 ├── package.json # 项目依赖、脚本命令、配置信息 ├── vite.config.js # Vite 构建配置 └── README.md # 项目说明文档

main.js是最核心的启动文件，里面做的事可以理解为"组装应用并启动"。脚手架默认生成的main.js大致长这样：

import { createApp } from 'vue' import App from './App.vue' import router from './router' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app')

逻辑很直白：用createApp创建应用实例，注册Pinia和路由插件，最后调用mount('#app')把整个应用挂载到index.html里<div id="app"></div>这个节点上。以后你想全局注册一个组件、引入一个UI库，都是在main.js里通过app.use()或app.component()来做。

3.4 第一个组件：单文件组件的三角结构

脚手架的工程跑起来了，现在亲手写一个组件。Vue单文件组件（SFC）由三个部分组成：<template>写结构、<script setup>写逻辑、<style>写样式。三块内容放在同一个.vue文件里，作用域互相配合，这也是Vue组件化的基础形态。

我写一个简单的卡片组件作为示例：

<template> <div class="user-card"> <h3>{{ user.name }}</h3> <p>{{ user.title }}</p> <button @click="handleFollow">关注</button> </div> </template> <script setup> import { ref } from 'vue' const props = defineProps({ user: { type: Object, required: true } }) const isFollowed = ref(false) const handleFollow = () => { isFollowed.value = !isFollowed.value } </script> <style scoped> .user-card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; } </style>

注意<style scoped>里的scoped关键字，它表示这个样式只对当前组件生效。Vue会在编译时给当前组件的所有元素加一个><!-- Card.vue --> <div class="card"> <header> <slot name="header">默认标题</slot> </header> <main> <slot>默认内容</slot> </main> <footer> <slot name="footer" /> </footer> </div>

父组件里用template标签配合v-slot指令来填充：

<Card> <template #header>用户信息</template> <p>这里是卡片主体内容</p> <template #footer> <button>确认</button> <button>取消</button> </template> </Card>

#header是v-slot:header的简写形式，Vue3推荐的语法。

还有一类是作用域插槽，用来解决"子组件的数据想交给父组件的插槽来渲染"这个需求。比如列表组件内部已经拿到了数据，但每一行的展示方式想交给父组件决定：

<!-- DataList.vue --> <ul> <li v-for="item in items" :key="item.id"> <slot :item="item" :index="index" /> </li> </ul>

父组件使用：

<DataList :items="list"> <template #default="{ item }"> <span>{{ item.name }}</span> <em>{{ item.price }}</em> </template> </DataList>

插槽的熟练运用，是组件从"基本能用"升级到"灵活可扩展"的关键台阶。我见过很多项目里组件写死模板，结果换个页面的展示需求就要复制一份组件代码，这就是没用好插槽的代价。

4.2 动态组件与keep-alive：页面切换的性能优化

在后台管理系统中，经常遇到"根据当前菜单动态切换页面内容"的需求。Vue的<component :is="currentComponent" />动态组件就是为这种场景设计的，它根据变量值动态渲染对应的组件。

动态组件配合<keep-alive>是一对经典搭档。<keep-alive>的作用是缓存组件实例，切换走的时候不销毁组件，切回来直接恢复，不需要重新渲染和重新请求数据。这在带有搜索条件、滚动位置、表单单据等场景的页面中尤其有用。

但要注意，缓存是有代价的——被缓存的组件写在onActivated和onDeactivated声明周期里的代码会影响切换行为。我自己的经验是：列表页需要缓存（切回来要保持搜索条件和滚动位置），表单页不要缓存（切回来要重新加载最新数据），否则会出现提交过的数据还残留的问题。

具体用法：

<keep-alive> <component :is="currentView" /> </keep-alive>

还可以通过include/exclude属性精确控制缓存哪些组件，比如只缓存列表页面：

<keep-alive :include="['UserList', 'OrderList']"> <router-view /> </keep-alive>

4.3 自定义指令：按钮权限控制的优雅解法

热词里提到"vue按钮权限怎么控制"，这是企业级项目里绕不开的需求。登录用户的角色不一样，界面上能看到的按钮也不一样——普通员工看不到"删除"，管理员能看到。很多人第一反应是每个按钮加一个v-if判断，但这样判断逻辑散落在各个组件里，后期维护成本很高。

更优雅的方案是自定义指令。我用得最顺手的是v-permission指令，它把权限校验的逻辑集中在指令定义处，模板里只要写一行：

<button v-permission="'user:delete'">删除</button>

指令的定义实现：

// src/directives/permission.js import { useAuthStore } from '@/stores/auth' export const permission = { mounted(el, binding) { const { value } = binding const authStore = useAuthStore() // 从状态管理中获取当前用户拥有的权限码数组 const enabled = authStore.permissions.includes(value) // 没有权限直接移除DOM元素 if (!enabled) { el.parentNode && el.parentNode.removeChild(el) } } }

然后在main.js里全局注册：

import { permission } from './directives/permission' app.directive('permission', permission)

为什么用自定义指令而不是v-if？因为指令把权限的校验和渲染逻辑彻底封装了，模板简洁、复用性高、权限码变更时只需要维护状态管理的权限数组和接口返回的权限数据，不用满项目搜v-if。这是工程化思维的一个典型体现。

4.4 组件库按需引入：打包体积控制的必修课

几乎每一个Vue实战项目都会引入组件库，Element Plus、Ant Design Vue、Naive UI是最常见的几个。它们的共同特点是组件特别多，全量引入会导致打包体积非常夸张。Element Plus全量引入，仅仅JS部分就接近1MB，对页面加载速度是很大的负担。

按需引入是解决方案。以Element Plus为例，官方推荐的方案是配合unplugin-auto-import和unplugin-vue-components这两个插件，自动按需引入组件和API：

// vite.config.js import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ], })

配置好之后，模板里直接用<el-button>、<el-table>，插件会在编译阶段自动把用到的组件和对应样式引入，没用到的一点都不会进打包产物。实测下来，一个管理后台的打包体积能从1MB多降到400KB左右，首屏加载时间能快将近一半。

这里有个坑要提醒：unplugin-vue-components是自动导入组件，但函数式的API（比如ElMessage、ElMessageBox）需要额外的样式手动引入。我用Element Plus时吃了这个亏，弹窗样式全是乱的，排查了半天才意识到是没手动引样式：

import 'element-plus/es/components/message/style/css' import 'element-plus/es/components/message-box/style/css'

5. Vue Router 路由体系与实践

5.1 路由基础：router与route的职责区分

Vue Router是单页应用（SPA）的核心基础设施。单页应用只有一个HTML页面，之所以能在不同"页面"之间切换，全靠前端路由用JavaScript控制URL变化并渲染对应的组件。

很多新手搞不清router和route的区别。简单说：router是路由器，负责跳转（router.push、router.replace）；route是当前路由信息，只读，描述当前地址对应的各种信息（路径、参数、query等）。可以这样类比：router是导航仪，告诉你现在要去哪；route是当前所在位置的路牌，告诉你现在在哪。

脚手架默认生成的路由配置大概是这样的结构：

// src/router/index.js import { createRouter, createWebHistory } from 'vue-router' import HomeView from '@/views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('@/views/AboutView.vue') } ] }) export default router

注意AboutView.vue使用的是动态导入() => import(...)写法，这叫路由懒加载。它会在用户访问/about时才加载这个组件的代码，而不是应用启动时就把所有页面代码都下载下来。后台管理系统页面一多，路由懒加载对首屏性能的影响非常大，这几行代码一定不能省。

5.2 动态路由与权限路由的落地

动态路由是热词里高频出现的关键词，也是后台管理系统最常见的路由需求：不同角色登录后看到的菜单不一样。实现思路并不复杂，核心就是"先登录，再根据权限信息动态添加路由"。

第一步：定义只属于特定角色的路由（权限路由），比如只有管理员能访问的用户管理页、系统设置页。

第二步：用户登录后，接口返回该用户的角色和权限码数组，前端根据权限码生成该用户应该能访问的路由表。

第三步：用router.addRoute()方法动态添加这些路由，再用router.getRoutes()确认添加成功。

// 根据权限码过滤出允许访问的路由 function generateRoutes(permissions) { const allRoutes = [ { path: '/user-management', name: 'UserManagement', component: () => import('@/views/UserManagement.vue'), meta: { permissions: ['admin'] } } // ...其他权限路由 ] return allRoutes.filter(route => route.meta.permissions.some(p => permissions.includes(p)) ) } // 登录成功后动态添加 const allowedRoutes = generateRoutes(userInfo.permissions) allowedRoutes.forEach(route => { router.addRoute(route) })

同时配合前置守卫做跳转拦截：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (!token && to.path !== '/login') { next('/login') } else { next() } })

一个完整的权限路由需要后端配合返回用户可访问的菜单和权限，前端做动态路由和守卫拦截，属于双保险。很多面试题里问"Vue动态路由怎么实现"，其实就是上面这套逻辑，理解原理后不管换什么前端框架，这套思路都通用。

5.3 路由传参的几种方式与使用场景

路由传参用不好会出现刷新页面参数丢失的问题，这是个经典坑。Vue Router 4 支持三种传参方式，各有的适用场景。

// 方式一：query 字符串传参 router.push({ path: '/detail', query: { id: 1 } }) // URL 显示：/detail?id=1 // 获取：route.query.id // 方式二：params 传参（配合路由定义） // 路由定义中：{ path: '/detail/:id', component: DetailView } router.push({ name: 'detail', params: { id: 1 } }) // URL 显示：/detail/1 // 获取：route.params.id // 方式三：state 传参 router.push({ name: 'detail', state: { fromList: true } }) // URL 不变，数据存在 history.state 中

三种方式的注意事项：

• query方式的参数会出现在URL里，刷新不丢，适合传简短标识。
• params方式必须与路由路径的参数定义配合使用，而且如果跳转时用path而不是name，params会被直接忽略——这是最常见的坑。
• state方式传的数据不会暴露在URL里，适合传对象、列表快照这类大体积或敏感数据，但刷新页面后state也会丢失，需要结合业务场景判断。

我实际项目中有一套稳妥组合：列表页跳详情页传params带ID，详情页根据ID重新请求数据；跨页面传筛选条件时用query，保证用户刷新后筛选条件还在；用户勾选状态这类临时数据用pinia管理，不依赖路由。

6. 高频踩坑实录与项目增量实践

6.1 开发期避坑速查表

下面这些坑是我在带团队和做项目过程中反复遇到的，整理成一张速查表，能帮你在开发期避开大量无效排查时间。这些内容对应了 "vscode中点vue标签没有跳转"、"vue div超出隐藏"、"vue image能显示pdf吗" 等热词背后实实在在的问题场景。

我挑两个展开聊。第一个是刷新404的问题。开发模式下npm run dev一切正常，是因为Vite开发服务器做了路由重写的处理；但打包部署到Nginx或者SpringBoot的静态文件目录后，你在根路径能访问，点/user/list之后一刷新，服务器收到一个/user/list的请求，找不到对应文件，就报404了。解决办法有两种：一种是用hash模式，URL变成/user/list#/page，路由信息在#后面，不会发给服务器，刷新自然没问题；另一种是让后端把所有的前端路由请求都重写到index.html，由前端路由接管。我自己的习惯是：纯前端项目用history模式加服务器重写，因为URL更友好；要往SpringBoot里打包的场景，直接用hash模式，省去配置后端的麻烦。

第二个是"往SpringBoot打包"的问题。Vue项目构建产物是dist目录里的一组静态文件，打包进SpringBoot无非是两步：第一步把dist里的内容放到SpringBoot的src/main/resources/static目录下，第二步按上面说的处理路由模式问题。但这里有个最隐蔽的坑——静态资源路径。Vite默认base: '/'，意味着它生成的资源引用是绝对路径，比如/assets/index-abc123.js，部署到服务器根目录没问题，但SpringBoot内部处理静态资源的方式略有不同，如果你把dist放到一个子路径下，所有资源都会404。解决办法就是在vite.config.js里设置相对路径：

// vite.config.js export default defineConfig({ base: './', // ...其他配置 })

这样生成的资源引用都是相对路径，无论部署到什么目录都不会出问题。用相对路径有时字体文件和图片的引用会需要注意嵌套层级，但基本都能解决。

6.2 vite.config.js 开发代理：解除跨域噩梦

前端开发中跨域问题绕不开。我们本地跑在localhost:5173，后端接口在localhost:8080，浏览器因为同源策略的限制，前端直接请求后端接口会被拦截。用代理是开发环境最优雅的解法。

在vite.config.js里配置：

export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } })

这个配置是什么意思？前端请求/api/user/list时，Vite开发服务器会把请求转发到http://localhost:8080/user/list，rewrite负责把/api前缀去掉。changeOrigin: true保证请求头中Host字段被修改为目标地址，防止后端校验时因为Host不一致而报错。

配置好之后，前端代码里统一写相对路径/api/xxx，请求就不存在跨域问题了。等到部署上线时，后端再做一个统一的网关转发或者直接配置同源访问。这里我给新手一个建议：项目里所有的接口请求路径都以/api开头统一管理，后续做代理、做网关重写、做Mock切换都方便。

6.3 从业务场景出发的"页面级调试"技巧

Vue3配合Vite的开发调试体验相当好，但很多新手不知道利用好浏览器和Vue生态提供的工具。我实际工作中依赖这几个调试手段：

• Vue Devtools浏览器插件：查看组件树、props/emit流向、Pinia状态实时值。调试组件通信问题时，我第一件事永远是开Devtools看组件的props到底收到了什么。
• 浏览器Network面板：确认接口请求是否发出、参数是否对、响应是否符合预期。很多"页面没数据"的排查都可以从这里入手。
• Vite的debugger配合源码定位：在<script setup>里直接写debugger，浏览器会停在这一行，配合Vue的源码映射（source map），能从编译后的代码准确映射回源码位置。
• 移动端调试：如果用手机浏览器访问开发环境页面，在电脑上打开chrome://inspect进行远程调试，真机效果一眼看清。

调试姿态比工具更重要。遇到问题先定位"是请求层、渲染层还是交互层"出了问题，一层层缩小范围，不要盲目改代码。这是我带团队时反复强调的排查思路，也是工作效率差距的来源。

6.4 实战路线：从简单组件到完整后台页面的进阶路径

这篇文章最后，我给出一条经过验证的学习与实践路径，从独立编写组件到整合出一个完整后台页面。按照这个节奏走下去，大概三四周就能对Vue3工程化开发形成完整的肌肉记忆。

第一步（第1周）：用脚手架搭工程，反复练习组件的基础通信（props、emit、v-model），写一个常见的评论组件或者卡片列表组件，把所有通信方式都实际用一遍。熟悉vue-router的基本配置、跳转、传参。

第二步（第2周）：引入Pinia做全局状态练习，做一个简单的购物车功能，理解状态管理解决什么问题、什么时候才需要它。同时开始使用Element Plus组件库，练习列表页和表单页的组合搭建。

第三步（第3周）：做一个完整的管理后台页面，包含登录、路由守卫拦截、Token管理、权限按钮控制、列表搜索、分页、弹窗表单。重点体验"没有权限时整个功能如何优雅降级"的逻辑，以及完整的请求、状态、渲染链路。

第四步（第4周）：学习一些进阶主题——组件逻辑复用（composables）、自定义指令、Mock数据模拟、Vite打包优化，同时研究怎么把项目集成到后端框架中部署上线。

每一步都要真实写代码，不要只看不练。这个学习路径覆盖了热词里头 "vue入门"、"vue项目实战"、"vue前端面试题" 提到的大部分核心知识点，面试和工作中遇到的场景基本都能应对。

另外，学习过程中"阅读优秀源码"是提升最快的途径之一。去GitHub找一个开源的Vue3后台管理系统，比如 vue-pure-admin、vue-vben-admin，把项目clone下来，重点看它们的目录结构怎么组织、权限路由怎么实现、组件怎么拆分、API层怎么做封装。不要怕项目复杂，挑一个模块精读即可，比看100篇教程都有效。

最后再分享一个我在实际项目里反复验证的经验：组件化的边界不是一次就能分好的，随着业务迭代，组件拆分方案也需要持续重构。第一次开发时觉得合适的拆分，可能三个月后随着新功能的加入就不合适了。重构组件不是"推翻重来"，而是把职责重新划分、把公共部分抽出来。代码没有完美的，只有当前业务阶段下"够用且好维护"的。胆子大一点，多拆分多重构，这个手感是练出来的。