快速入门 在线尝试 Vue 要快速体验 Vue，您可以直接在我们的 Playground 中尝试。
如果您更喜欢一个没有构建步骤的纯 HTML 设置，您可以使用这个 JSFiddle 作为起点。
如果您已经熟悉 Node.js 和构建工具的概念，您还可以在 StackBlitz 上尝试一个完整的构建设置。
创建 Vue 应用 先决条件
熟悉命令行安装 Node.js 版本 18.3 或更高版本在本节中，我们将介绍如何在本地机器上搭建 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.如果您对某个选项不确定，现在只需按 Enter 键选择 否。一旦创建项目，请按照说明安装依赖项并启动开发服务器
npmpnpmyarnbunsh$ cd
$ npm install
$ npm run devsh$ cd
$ pnpm install
$ pnpm run devsh$ cd
$ yarn
$ yarn devsh$ cd
$ bun install
$ bun run dev现在您应该有一个运行的第一个 Vue 项目了！请注意，生成的项目中的示例组件是使用 Composition API 和 这里我们使用 unpkg，但您也可以使用任何提供npm包的CDN，例如 jsdelivr 或 cdnjs。当然，您也可以下载此文件并自行提供。
从CDN使用Vue时，不涉及“构建步骤”。这使得设置变得更加简单，适合增强静态HTML或与后端框架集成。但是，您将无法使用单文件组件（SFC）语法。
使用全局构建 上述链接加载了Vue的 全局构建，其中所有顶级API都作为全局 Vue 对象上的属性暴露。以下是一个使用全局构建的完整示例
html
CodePen演示 >
html
CodePen演示 >
提示
指南中关于组合API的许多示例将使用 html
注意，我们使用
CodePen演示 >
html
CodePen演示 >
您还可以将其他依赖项的条目添加到导入映射中 - 但请确保它们指向您打算使用的库的ES模块版本。
导入映射浏览器支持
导入映射是一个相对较新的浏览器功能。请确保在它的 支持范围内 使用浏览器。特别是，它仅在Safari 16.4+上受支持。
生产使用注意事项
到目前为止的示例都使用了Vue的开发构建版本 - 如果您打算在生产环境中从CDN使用Vue，请确保查看 生产部署指南。
虽然可以在没有构建系统的情况下使用Vue，但可以考虑的一种替代方法是使用 vuejs/petite-vue，这可能在某些场景下比使用 jquery/jquery（过去）或 alpinejs/alpine（现在）更合适。
模块拆分 随着我们深入了解指南，我们可能需要将代码拆分为单独的JavaScript文件，以便更容易管理。例如
html
js// my-component.js
export default {
data() {
return { count: 0 }
},
template: `
}js// my-component.js
import { 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*/ 注释，以获得它们的语法高亮。
下一步 如果你跳过了 简介，我们强烈建议你在继续阅读其他文档之前先阅读它。
继续阅读指南
指南将全面详细地介绍框架的各个方面。
尝试教程
对于那些喜欢动手学习的人来说。
查看示例
探索核心功能和常见UI任务的示例。