快速上手 线上尝试 Vue 想要快速体验 Vue，你可以直接试试我们的演练场。
如果你更喜欢不用任何构建的原始 HTML，可以使用 JSFiddle 入门。
如果你已经比较熟悉 Node.js 和构建工具等概念，还可以直接在浏览器中打开 StackBlitz 来尝试完整的构建设置。
要了解推荐的设置流程，请观看这个互动式 Scrimba 教程，它将向你展示如何运行、编辑和部署你的第一个 Vue 应用程序。
创建一个 Vue 应用 前提条件
熟悉命令行已安装 ^20.19.0 || >=22.12.0 版本的 Node.js在本节中，我们将介绍如何在本地搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 的单文件组件 (SFC)。
确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 $ 符号)：
npmpnpmyarnbunsh$ npm create vue@latestsh$ pnpm create vue@latestsh# For Yarn (v1+)
$ yarn create vue
# For Yarn Modern (v2+)
$ yarn create vue@latest
# For Yarn ^v4.11
$ yarn dlx create-vue@latestsh$ bun create vue@latest这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：
✔ Project name: …
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
Scaffolding project in ./
Done.如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
npmpnpmyarnbunsh$ cd
$ npm install
$ npm run devsh$ cd
$ pnpm install
$ pnpm run devsh$ cd
$ yarn
$ yarn devsh$ cd
$ bun install
$ bun run dev你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 这里我们使用了 unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs。当然，你也可以下载此文件并自行提供服务。
通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。
使用全局构建版本 上面的链接使用了全局构建版本的 Vue，该版本的所有顶层 API 都以属性的形式暴露在了全局的 Vue 对象上。这里有一个使用全局构建版本的例子：
html
CodePen 示例 >
html
CodePen 示例 >
TIP
本指南中许多关于组合式 API 的例子将使用 html
注意我们使用了
CodePen 示例 >
html
CodePen 示例 >
你也可以在映射表中添加其他的依赖——但请务必确保你使用的是该库的 ES 模块版本。
导入映射表的浏览器支持情况
导入映射表是一个相对较新的浏览器功能。请确保使用其支持范围内的浏览器。请注意，只有 Safari 16.4 以上版本支持。
生产环境中的注意事项
到目前为止示例中使用的都是 Vue 的开发构建版本——如果你打算在生产中通过 CDN 使用 Vue，请务必查看生产环境部署指南。
虽然 Vue 可以不依赖构建系统使用，但也可以考虑使用 vuejs/petite-vue 这个替代方案，以更好地适配可能在 jquery/jquery (过去) 或 alpinejs/alpine (现在) 的上下文中使用的情况。
拆分模块 随着对这份指南的逐步深入，我们可能需要将代码分割成单独的 JavaScript 文件，以便更容易管理。例如：
index.htmlhtml
my-component.jsjsexport default {
data() {
return { count: 0 }
},
template: `
}my-component.jsjsimport { ref } from 'vue'
export default {
setup() {
const count = ref(0)
return { count }
},
template: `
}如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作，也即是当你打开一个本地文件时浏览器使用的协议。
由于安全原因，ES 模块只能通过 http:// 协议工作，也即是浏览器在打开网页时使用的协议。为了使 ES 模块在我们的本地机器上工作，我们需要使用本地的 HTTP 服务器，通过 http:// 协议来提供 index.html。
要启动一个本地的 HTTP 服务器，请先安装 Node.js，然后通过命令行在 HTML 文件所在文件夹下运行 npx serve。你也可以使用其他任何可以基于正确的 MIME 类型服务静态文件的 HTTP 服务器。
可能你也注意到了，这里导入的组件模板是内联的 JavaScript 字符串。如果你正在使用 VS Code，你可以安装 es6-string-html 扩展，然后在字符串前加上一个前缀注释 /*html*/ 以高亮语法。
下一步 如果你尚未阅读简介，我们强烈推荐你在移步到后续文档之前返回去阅读一下。
继续阅读该指南
该指南会带你深入了解框架所有方面的细节。
尝试互动教程
适合喜欢边动手边学的读者。
查看示例
浏览核心功能和常见用户界面的示例。