目录

前置知识速刷（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>

本章考点：

1. data 必须是函数返回对象，保证组件多实例隔离

2. 事件修饰符 .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

1. 父 → 子：props + 校验

JavaScript

复制

// 父
<Row v-for="item in list" :data="item" />

// 子
props: {
  data: { type: Object, required: true }
}

1. 子 → 父：自定义事件

JavaScript

复制

// 子
<button @click="$emit('del', data.id)">删除</button>

// 父
<Row @del="handleDel" />

1. 跨层级：依赖注入（可选）

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 + devServer

• vue-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 跨域三板斧

1. dev 阶段：vite 代理

TypeScript

复制

server: { proxy: { '/api': 'http://localhost:3000' } }

1. 生产阶段：Nginx 反向代理

2. 终极方案：后端加 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 dev

8.3 性能彩蛋

• 列表虚拟滚动（vue-virtual-scroller）

• 组件异步加载（defineAsyncComponent）

• 首屏骨架屏（vite-plugin-skeleton）

---

9. 思维导图大合集（可右键保存）

1. ES6 速查表

2. flex 布局一图流

3. Vue3 组件通信图

4. 路由传参决策树

5. Axios 封装流程图

高清原图放 GitHub /docs 目录，直接打印贴墙