目录前置知识速刷30 min 过一遍1.1 JavaScript 高频考点1.2 ES6 基础Vue3 默认语法1.3 flex 布局思维导图边学边用2. Vue 实例从「Hello World」到「数据驱动」3. 模板语法三剑客指令 计算属性 监听器4. 组件化把「页面」拆成「乐高」4.1 组件通信 1-2-34.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 / constconst API ref()模板响应式解构const { id } route.params路由取参箭头函数onMounted(() {})生命周期模板字符串https://api.xxx/${id}Axios 拼接地址Promiseaxios.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 idapp h1{{ msg }}/h1 button clickreverse反转/button /div script typemodule 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-foritem in list :keyitem.idkey 用 id 别用 index双向绑定v-model.trimkeyword.trim去首尾空格条件渲染v-iftotal 0高频切换用v-show样式绑定:class{ active: isActive }对象写法最直观计算属性total() { return nums.reduce(...) }有缓存依赖不变不走函数监听器watch(page, fetchList)分页场景必备4. 组件化把「页面」拆成「乐高」4.1 组件通信 1-2-3父 → 子props 校验JavaScript复制// 父 Row v-foritem in list :dataitem / // 子 props: { data: { type: Object, required: true } }子 → 父自定义事件JavaScript复制// 子 button click$emit(del, data.id)删除/button // 父 Row delhandleDel /跨层级依赖注入可选JavaScript复制provide(reload, reload) inject(reload)4.2 插槽 组件「占位符」vue复制!-- 父 -- Card template #header封面图/template template #default正文/template /Card !-- 子 -- div classcard headerslot nameheader//header mainslot//main /div5. Vue CLI从「单文件」到「工程化」5.1 三件套vue/cli– 脚手架vue/cli-service– 内置 webpack devServervue-router/pinia– 官方插件一键装5.2 构建流程图Text复制npm create vuelatest ├─ 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-Origin8. 课堂实操把「截图」跑成真实项目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-skeleton9. 思维导图大合集可右键保存ES6 速查表flex 布局一图流Vue3 组件通信图路由传参决策树Axios 封装流程图高清原图放 GitHub/docs目录直接打印贴墙