跟着案例学vuecli-脚手架（纯零基础）

这门课解决什么问题

Vue CLI 是 Vue 项目的官方脚手架工具，它帮你自动生成项目结构、配置构建环境，省去手动搭建的麻烦。这门课不讲 Vue 语法本身，而是围绕一个完整的书籍列表案例，从零开始教你怎样用 Vue CLI 搭建项目、组织页面、处理路由、获取数据。如果你之前没接触过前端工程化，或者装过 Vue CLI 后不知道从哪开始，这门课会带你一步步落地。

适合什么基础，先看哪些讲

前置要求很低：需要了解基本的 HTML、CSS、JavaScript 语法，会用命令行运行简单命令就够了。不需要懂 Vue 的细节。

建议学习顺序：

• 第 1～4 讲必须认真看。这是铺垫，涵盖 npm 工具安装、创建第一个 Vue CLI 项目、理解项目启动后页面从哪来。很多人跳过这部分，后面就容易懵。
• 第 5～6 讲讲路由的基础用法。Vue CLI 项目里页面之间的跳转都靠路由，这是绕不开的。第 5 讲是单层路由，第 6 讲是嵌套路由，两讲逻辑递进，建议都看。
• 第 7～14 讲是一个完整的书籍管理系统案例，从页面布局、组件拆分、数据交互、界面交互逐步展开。这部分不用全部一次看完，可以边看边写代码，一两讲为一个节点。
• 第 15 讲是回顾总结，篇幅很短，可看可不看。

学完能做什么，怎样搭配练习

学完这门课，你能独立完成：用 Vue CLI 创建项目、用路由组织多个页面、把页面拆成可复用的组件、通过 axios 从服务器获取数据并在页面上展示。这些是所有 Vue 项目都需要的基础操作。

建议不要只看视频。每看完一讲，立刻在自己的 Vue CLI 项目里照着做一遍，遇到报错先不要跳过，尝试读错误信息。第 1～6 讲的代码量很小，一个讲配 10～15 分钟敲代码就够了。从第 7 讲开始跟着案例做，建议每两讲停下来，把当前的代码都整理一遍，确保能运行。

书籍列表案例里会用到 JSON 文件模拟后端数据。如果想加深理解，可以在案例基础上改动数据结构、增加新页面，或者自己设计一个类似的小项目（比如商品列表、文章分类）。这样学到的东西才能真正用上。

要注意的是，这门课不包含 Vue 组件内部的逻辑写法（比如 data、methods、生命周期），那些需要另外补。这门课的重点是"怎样组织一个 Vue 项目"，而不是"怎样写 Vue 代码"。如果你在跟案例做的时候，看到一些 Vue 的语法不理解，可以先记下来，后续再系统学。