学 Vue: 编程课程
学 Vue: 编程课程 — 在手机上通过构建组件学习 Vue.js
学 Vue: 编程课程 是一款免费起步的 iOS 和 Android 应用，面向只了解一点 HTML 和 JavaScript 的初学者，以及从 Options API 转向 Composition API 的开发者，教授 Vue.js。应用包含 42 门课程和 156 节课，内容从第一个模板一直讲到 Pinia、Vue Router 和 Nuxt 3；单文件组件可在你的设备上编译，因此 20 个引导式项目、任务和 Vue Lab 都无需服务器即可运行。
- 价格
- 免费，可升级至 Pro
- 平台
- iOS 和 Android
- 语言
- 22
- 年龄分级
- 4+
- 版本
- 82.6.0
- 需要
- iOS 15.1 或更高版本
- App Store
- 3.0 ★ (2)
亲手拆解一个组件之后，理解它就容易多了。
Vue Lab 每天都会给你一个出问题的组件，让你找出其中的 bug；你还可以通过实时控件调整组件的 props，并在点击时观察状态如何变化。单文件组件会直接在手机上编译，因此预览会在你眼前出错、修复，并通过错误卡片说明问题所在。
这是什么
学 Vue: 编程课程 是一款免费的 iOS 和 Android 应用，通过 42 门课程和 156 节课教授 Vue.js，内容从模板语法和数据绑定，一直到 Composition API、Pinia、Vue Router、TypeScript、Nuxt 3、使用 Vitest 进行测试以及全栈应用。单文件组件会在设备上编译，因此引导式项目、编程任务和实践型 Vue Lab 都能在手机上运行，无需服务器；Pro 用户还可使用 AI 导师来讲解代码和错误。
应用内
界面展示
课程
Vue 课程涵盖的内容
应用自有课程列表中的 42 门课程和 156 节课，内容从第一个模板一直涵盖到服务器端渲染和生产模式。
Vue.js 快速入门
Vue.js、Vue CLI 和项目结构简介，模板语法与数据绑定。
响应式与 Composition API
Vue 3 Composition API 基础、script setup 语法、响应式与计算属性，以及 Vue 指令。
组件与表单
组件基础与通信、插槽、provide 和 inject、表单与验证，以及组件生命周期。
复用与完善
Vue 3 composables、过渡与动画、错误处理，以及渲染函数和 JSX。
状态管理与路由
Pinia 状态管理、Vuex、使用 Vue Router 进行路由管理与高级路由模式，以及 API 和异步数据处理。
TypeScript、i18n 与工具链
在 Vue 3 中使用 TypeScript、国际化、Storybook 集成，以及 Vue 应用的部署与维护。
Nuxt 3、测试与实时应用
使用 Nuxt 3 进行服务器端渲染、使用 Vitest 进行组件测试、使用 Apollo 处理 GraphQL，以及使用 WebSockets 构建实时应用。
生产模式
性能、安全最佳实践、插件开发、发布组件库、渐进式 Web 应用和微前端。
工作原理
在应用中学习 Vue
每门课程都有等级划分；除第一门免费课程外，每节课开始时都会提供免费预览，让你在决定是否继续深入之前，先了解该主题的学习内容。
从 Introduction to Vue.js 开始
第一门课程免费，内容从 Vue 是什么开始，带你设置环境并创建 Hello Vue 应用。课程等级标注为 A1 至 C1，因此你能清楚地知道从哪里开始，以及接下来该学什么。
在手机上构建并运行组件
编辑单文件组件并立即预览。引导式项目会一步步扩展应用，App Studio 则让你可以基于现成蓝图，使用路由和 store 构建多页面应用。
在 Vue Lab 中练习
寻找每日 bug，在 Style Lab 中匹配目标设计，在 speed-build 对决中与时间赛跑，或将一个 Options API 组件改写为 Composition 风格。
包含内容
应用包含的内容
42
门课程，156 节课
内容从模板语法和指令开始，涵盖生命周期、slots、provide 和 inject、composables，一直到 Nuxt 3、GraphQL、PWA 和微前端。
20
引导式项目
一步步扩展应用，单文件组件会直接在你的设备上编译，预览出错时还会显示错误卡片。
28
编程任务
难度从易到难的练习，以及用于构建带路由和 store 的多页面应用的 App Studio 蓝图。
实验室
Vue Lab
响应式检查器、每日 bug 挑战、12 个 Style Lab 关卡、speed-build 对决、Options API 到 Composition API 的训练场，以及可分享为图片卡片的 My Components 库。
面试
Vue 面试问题
面向前端开发者面试的问题，包含测验、闪卡复习环节，以及可随时打开的速查表。
AI
AI 导师（Pro）
询问概念或错误，让 AI 解释你的代码，或针对你想学习的任何主题生成自定义课程。
背景
什么是 Vue.js？初学者应该先学什么？
Vue 是一个用于构建交互式 Web 界面的 JavaScript 框架，它以组件为基础：每个组件都是一小段可复用的代码，包含自己的模板、逻辑和样式。Vue 对初学者的吸引力在于入门平缓：你可以从普通 HTML 和少量 JavaScript 开始，再逐步添加结构。合理的学习顺序是先学模板和数据绑定，再学响应式和组件，然后学习 Composition API，最后再接触路由、状态管理和服务端渲染。
响应式核心理念
你修改一项数据，依赖它的界面就会自动更新。理解哪些值具有响应式，以及计算属性和 watchers 能带来什么变化，可以消除 Vue 学习初期的大部分困惑。
Options API 和 Composition API编写组件的两种方式
较早的 Options API 按类型组织代码，例如 data 和 methods。使用 script setup 的 Composition API 则按功能组织代码，并让可复用的 composables 更容易编写。许多教程和代码库仍然同时使用这两种方式，因此读懂任意一种都是一项实用技能。
Pinia、Vuex 和路由真实应用还需要什么
当应用拥有多个页面后，就需要通过路由在页面之间跳转，还需要一个共享 store 来存放多个组件都会使用的数据。Pinia 是 Vue 当前使用的 store，而 Vuex 是较早的方案，许多现有项目仍在使用。
Nuxt 和服务端渲染搜索和速度变得重要时
Nuxt 基于 Vue 构建，可在服务器上渲染页面，从而有助于提升首次加载速度和搜索可见性。通常应在熟悉组件、路由和状态之后，再进入这一阶段的学习。
是否适合
适合哪些人——不适合哪些人
如果你符合以下情况，就很适合
- 了解一些 HTML 和 JavaScript，想学习第一个框架
- 正在从 Options API 转向 Composition API，或从 Vuex 转向 Pinia
- 正在准备 Vue.js 开发者面试，或寻找第一份前端工作
- 相比阅读损坏组件的相关介绍，更喜欢通过修复它来学习
- 想利用通勤时间完成简短的学习课程
如果你符合以下情况，这不是适合你的工具
- 从未接触过 HTML 或 JavaScript——请先学习 JavaScript 课程
- 想用手机发布生产应用——但笔记本电脑仍然是完成这件事的工具
- 希望所有内容都免费：第一门课程和预览内容免费，Pro 可解锁完整课程体系
- 想学习官方 Vue.js 教材——这是一款独立的学习应用
问题
常见问题
在手机上学习 Vue.js 的最佳方式是什么？
通过运行组件来学习，而不只是阅读相关内容。学 Vue: 编程课程 可以在设备上编译单文件组件，因此其中的 20 个引导项目、28 个任务和 Vue Lab 都能在手机上运行。42 门课程中的简短课程会带你从模板语法一路学到 Nuxt 3，并提供一门免费课程供你开始学习。
这款应用会教授 Composition API 和 Pinia 吗？
会。学 Vue: 编程课程 提供 Vue 3 Composition API 基础、script setup 语法、composables 和 Pinia 状态管理课程，也涵盖用于现有项目的旧版 Vuex。Vue Lab 中的 Options to Composition API 道场可以让你将经典组件改写为现代风格。
Vue 中的 Options API 和 Composition API 有什么区别？
Options API 会按代码类型组织组件代码，例如 data、methods 和 computed；而使用 script setup 的 Composition API 会按功能组织代码，并让可复用的 composables 更容易实现。学 Vue: 编程课程 会教授使用 script setup 的 Composition API，并在 Vue Lab 中提供 Options to Composition API 道场，帮助你将经典组件改写为现代风格。
学习 Vue 之前需要了解 JavaScript 吗？
掌握一些 HTML 和 JavaScript 会有很大帮助。学 Vue: 编程课程 面向了解基础知识、想学习第一个框架的初学者，因此会从头讲解 Vue 概念，但不会教授 JavaScript 本身。如果变量和函数对你来说还很陌生，应该先学习 JavaScript 课程。
什么是 Vue Lab？
Vue Lab 是 学 Vue: 编程课程 中的练习区域，其中包含响应式检查器、每日 Bug 挑战（修复损坏的组件）、Style Lab 关卡（使用 CSS 匹配目标设计）、速度构建对决、Options to Composition API 道场，以及用于保存你所构建内容的 My Components 库。
它涵盖 Nuxt 3 和服务器端渲染吗？
涵盖。学 Vue: 编程课程 的高级课程会讲解使用 Nuxt 3 进行服务器端渲染、使用 Suspense 实现 SSR 流式渲染，以及结合 Fastify 和身份验证构建全栈 Vue 应用，同时还涵盖使用 Vitest 进行组件测试和使用 WebSockets 构建实时应用。
它能帮助准备 Vue.js 面试吗？
能。学 Vue: 编程课程 包含面向前端开发者岗位的 Vue 面试题，以及测验、闪卡复习课程和速查表。相关课程涵盖响应式、生命周期、composables 和状态管理，这些都是常见的面试主题。
学 Vue: 编程课程 免费吗？
应用可免费下载。第一门课程、每节课的预览内容、第一个引导项目、第一个任务、每日 Bug 挑战、三个 Style Lab 关卡、测验、面试题和速查表均免费，免费版本会显示广告。Pro 可解锁完整课程体系和实验室、AI 导师及证书考试，并移除广告。
这款应用是 Vue.js 团队开发的吗？
不是。学 Vue: 编程课程 是一款独立的学习应用，与 Vue.js 项目没有关联，也未获其认可。它通过自有课程和练习教授作为开源框架的 Vue.js。
有证书吗？
是的。通过作为 Pro 一部分的期末考试后，你将获得结业证书。它展示了你完成的学习成果，但不属于经认证的资历，因此最好与那些你能够讲解的组件和项目一起使用。
它支持哪些平台和语言？
学 Vue: 编程课程 可在 iPhone 上通过 App Store（iOS 15.1 或更高版本）运行，也可在 Android 上通过 Google Play 使用。界面支持 22 种语言，并且该应用在 App Store 上的评级为 4+。
开始使用
今天就开始构建你的第一个 Vue 组件
在 iOS 和 Android 上免费开始，支持 22 种语言。
更多 CoddyKit 产品
可在 iOS 和 Android 上使用。