从零到项目上线：一张思维导图吃透 Vue3 全家桶
目录
前置知识速刷（30 min 过一遍）
1.1 JavaScript 高频考点
1.2 ES6 基础（Vue3 默认语法）
1.3 flex 布局思维导图（边学边用）
2. Vue 实例：从「Hello World」到「数据驱动」
3. 模板语法三剑客：指令 + 计算属性 + 监听器
4. 组件化：把「页面」拆成「乐高」
4.1 组件通信 1-2-3
4.2 插槽 = 组件「占位符」
5. Vue CLI：从「单文件」到「工程化」
5.1 三件套
5.2 构建流程图
6. 路由：单页应用「导航骨架」
6.1 路由表
6.2 传参与取值
7. Axios：前后端「胶水」
7.1 封装实例
7.2 跨域三板斧
8. 课堂实操：把「截图」跑成真实项目
8.1 需求还原（对应 9.1 案例截图）
8.2 核心代码（已开源）
8.3 性能彩蛋
9. 思维导图大合集（可右键保存）
前置知识速刷（30 min 过一遍）
1.1 JavaScript 高频考点
装箱 / 拆箱
为什么[] == ![]为 true？先隐式装箱再转数字事件循环
setTimeout → 宏任务，Promise.then → 微任务，面试常问执行顺序垃圾回收
新生代副回收器（Scavenge）+ 老生代主回收器（标记清除），避免内存泄漏需及时解除事件监听
1.2 ES6 基础（Vue3 默认语法）
表格
复制
| 特性 | 代码片段 | 在 Vue 中的用途 |
|---|---|---|
| let / const | const API = ref() | 模板响应式 |
| 解构 | const { id } = route.params | 路由取参 |
| 箭头函数 | onMounted(() => {}) | 生命周期 |
| 模板字符串 | `https://api.xxx/${id}` | Axios 拼接地址 |
| Promise | axios.get().then() | 异步请求 |
| 模块化 | import Row from '@/components/Row.vue' | 单文件组件 |
以上 6 句代码，在后续实战会出现 ≥ 20 次，先背再敲
1.3 flex 布局思维导图（边学边用）
Text
复制
flex-container ├─ justify-content 主轴 │ ├─ flex-start | center | space-between ├─ align-items 交叉轴 │ ├─ stretch | center | flex-end ├─ flex-wrap │ ├─ wrap ⇒ 自适应换行 └─ flex ├─ 1 ⇒ 占剩余空间课堂实操「文章列表」两栏自适应，核心代码就两行：
css
复制
.list { display: flex; flex-wrap: wrap; } .card { flex: 1 1 300px; } /* 最小 300，自动填充 */2. Vue 实例：从「Hello World」到「数据驱动」
HTML
预览
复制
<div id="app"> <h1>{{ msg }}</h1> <button @click="reverse">反转</button> </div> <script type="module"> import { createApp } from 'vue' createApp({ data() { // 3.3 data 对象 return { msg: 'Hello Vue3' } }, methods: { // 3.4 methods reverse() { this.msg = this.msg.split('').reverse().join('') } } }).mount('#app') </script>本章考点：
data必须是函数返回对象，保证组件多实例隔离事件修饰符
.stop/.prevent别滥用，优先在 JS 里处理
3. 模板语法三剑客：指令 + 计算属性 + 监听器
表格
复制
| 需求 | 写法 | 备注 |
|---|---|---|
| 列表渲染 | v-for="item in list" :key="item.id" | key 用 id 别用 index |
| 双向绑定 | v-model.trim="keyword" | .trim去首尾空格 |
| 条件渲染 | v-if="total > 0" | 高频切换用v-show |
| 样式绑定 | :class="{ active: isActive }" | 对象写法最直观 |
| 计算属性 | total() { return nums.reduce(...) } | 有缓存，依赖不变不走函数 |
| 监听器 | watch(page, fetchList) | 分页场景必备 |
4. 组件化：把「页面」拆成「乐高」
4.1 组件通信 1-2-3
父 → 子：props + 校验
JavaScript
复制
// 父 <Row v-for="item in list" :data="item" /> // 子 props: { data: { type: Object, required: true } }子 → 父：自定义事件
JavaScript
复制
// 子 <button @click="$emit('del', data.id)">删除</button> // 父 <Row @del="handleDel" />跨层级：依赖注入（可选）
JavaScript
复制
provide('reload', reload) inject('reload')4.2 插槽 = 组件「占位符」
vue
复制
<!-- 父 --> <Card> <template #header>封面图</template> <template #default>正文</template> </Card> <!-- 子 --> <div class="card"> <header><slot name="header"/></header> <main><slot/></main> </div>5. Vue CLI：从「单文件」到「工程化」
5.1 三件套
@vue/cli– 脚手架@vue/cli-service– 内置 webpack + devServervue-router/pinia– 官方插件一键装
5.2 构建流程图
Text
复制
npm create vue@latest ├─ vite.config.ts # 5.3 环境变量 ├─ src/api/ # Axios 封装 ├─ src/router/ # 路由表 ├─ src/components/ # 通用组件 └─ src/views/ # 页面级组件6. 路由：单页应用「导航骨架」
6.1 路由表
TypeScript
复制
const routes = [ { path: '/', component: () => import('@/views/Home.vue') }, { path: '/detail/:id', name: 'detail', component: Detail } ]6.2 传参与取值
JavaScript
复制
// 跳转 router.push({ name: 'detail', params: { id: 42 } }) // 接收 const route = useRoute() const id = computed(() => route.params.id) // 响应式7. Axios：前后端「胶水」
7.1 封装实例
TypeScript
复制
const http = axios.create({ baseURL: import.meta.env.VITE_API_URL, // 5.3 环境变量 timeout: 8000 }) // 拦截器 http.interceptors.response.use( res => res.data, err => { ElMessage.error(err.response?.data?.msg || '网络错误') return Promise.reject(err) })7.2 跨域三板斧
dev 阶段：vite 代理
TypeScript
复制
server: { proxy: { '/api': 'http://localhost:3000' } }生产阶段：Nginx 反向代理
终极方案：后端加
Access-Control-Allow-Origin
8. 课堂实操：把「截图」跑成真实项目
8.1 需求还原（对应 9.1 案例截图）
文章列表 + 分页
删除二次确认
顶部搜索 + 分类筛选
响应式两栏（flex 实现）
8.2 核心代码（已开源）
bash
复制
git clone https://github.com/yourname/vue3-es6-boilerplate cd vue3-es6-boilerplate pnpm i pnpm dev8.3 性能彩蛋
列表虚拟滚动（
vue-virtual-scroller）组件异步加载（
defineAsyncComponent）首屏骨架屏（
vite-plugin-skeleton）
9. 思维导图大合集（可右键保存）
ES6 速查表
flex 布局一图流
Vue3 组件通信图
路由传参决策树
Axios 封装流程图
高清原图放 GitHub
/docs目录，直接打印贴墙