开始
欢迎来到 Vue 互动教程!
本教程的目标是让你在浏览器中快速体验使用 Vue 是什么感受,因此它不会太过深入解释所有细节,如果有些东西你一时无法完全理解,也不必担心。但是,在完成本教程之后,请务必阅读深入指南,以确保你对涉及的话题有更深入、完整的理解。
前置要求
本教程假定你基本熟悉 HTML、CSS 和 JavaScript。对于前端开发来说,一个完全的新手也许并不适合上手就学习框架——最好是掌握了基础知识再回来。其他框架的经验会有所帮助,但并不是必需的。
如何使用本教程
你可以编辑右侧上方的代码,并立即看到结果更新。教程每一步都会介绍一个 Vue 的核心功能,并期望你能够补全代码,让 demo 运行起来。如果你卡住了,会有一个“看答案!”按钮,点击它,会为你揭晓能够运行的代码。试着不要太依赖该按钮——自己解决会学得更快。
如果你是一名来自 Vue 2 或其他框架的资深开发者,你可以调整一些设置来充分使用本教程。如果你是一名初学者,推荐使用默认设置进行学习。
教程设置详情
-
Vue 提供了两种 API 风格:选项式 API 和组合式 API。本教程两者都支持——你可以使用顶部的 API 风格偏好来选择你喜欢的风格。了解更多有关 API 风格的信息。
-
你也可以在单文件组件模式和 HTML 模式之间切换。前者会以单文件组件 (SFC) 的格式展示示例代码,这是大多数开发者配合构建步骤使用 Vue 的模式。HTML 模式则在无需构建步骤时使用。
TIP
如果你想在应用中采用 HTML 模式而不进行构建,那么请确保要么在脚本中按如下方式导入:
js
import { ... } from 'vue/dist/vue.esm-bundler.js'
要么通过配置构建工具来正确解析 vue
。以下是 Vite 配置的示例:
js
// vite.config.js
export default {
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js'
}
}
}
更多相关信息,请参阅工具链指南中的相关部分。
准备好了吗?点击“下一步”按钮开始吧。