快速入门 ​

在线尝试 Vue ​

• 要快速体验 Vue，您可以直接在我们的 Playground 中尝试。

• 如果您更喜欢一个没有构建步骤的纯 HTML 设置，您可以使用这个 JSFiddle 作为起点。

• 如果您已经熟悉 Node.js 和构建工具的概念，您还可以在 StackBlitz 上尝试一个完整的构建设置。

创建 Vue 应用 ​

在本节中，我们将介绍如何在本地机器上搭建 Vue 单页应用。创建的项目将使用基于 Vite 的构建设置，并允许我们使用 Vue 单文件组件 (SFC)。

请确保您已安装最新版本的 Node.js，并且您当前的工作目录是您打算创建项目的目录。在您的命令行中运行以下命令（无需输入 $ 符号）

$ npm create vue@latest

$ pnpm create vue@latest

# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest

# For Yarn ^v4.11
$ yarn dlx create-vue@latest

$ bun create vue@latest

此命令将安装并执行 create-vue，这是官方 Vue 项目脚手架工具。您将看到有关 TypeScript 和测试支持的几个可选功能的提示

✔ Project name: … <your-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 ./<your-project-name>...
Done.

如果您对某个选项不确定，现在只需按 Enter 键选择 否。一旦创建项目，请按照说明安装依赖项并启动开发服务器

$ cd <your-project-name>
$ npm install
$ npm run dev

$ cd <your-project-name>
$ pnpm install
$ pnpm run dev

$ cd <your-project-name>
$ yarn
$ yarn dev

$ cd <your-project-name>
$ bun install
$ bun run dev

现在您应该有一个运行的第一个 Vue 项目了！请注意，生成的项目中的示例组件是使用 Composition API 和 <script setup> 编写的，而不是使用 Options API。以下是一些额外的提示

• 推荐的IDE设置是 Visual Studio Code + Vue - 官方扩展。如果您使用其他编辑器，请查看 IDE支持部分。
• 更多工具信息，包括与后端框架的集成，请参阅 工具指南。
• 要了解有关底层构建工具Vite的更多信息，请查看 Vite文档。
• 如果您选择使用TypeScript，请查看 TypeScript使用指南。

当您准备好将应用程序部署到生产环境时，请运行以下命令

$ npm run build

$ pnpm run build

$ yarn build

$ bun run build

这将创建一个位于项目 ./dist 目录中的生产就绪版本的应用程序构建。有关将应用程序部署到生产的更多信息，请查看 生产部署指南。

下一步 >

从CDN使用Vue ​

您可以直接通过script标签从CDN使用Vue

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

这里我们使用 unpkg，但您也可以使用任何提供npm包的CDN，例如 jsdelivr 或 cdnjs。当然，您也可以下载此文件并自行提供。

从CDN使用Vue时，不涉及“构建步骤”。这使得设置变得更加简单，适合增强静态HTML或与后端框架集成。但是，您将无法使用单文件组件（SFC）语法。

使用全局构建 ​

上述链接加载了Vue的 全局构建，其中所有顶级API都作为全局 Vue 对象上的属性暴露。以下是一个使用全局构建的完整示例

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

使用ES模块构建 ​

在其余的文档中，我们将主要使用 ES模块 语法。大多数现代浏览器现在原生支持ES模块，因此我们可以通过以下方式从CDN使用Vue

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

注意，我们使用 <script type="module">，并且导入的CDN URL指向Vue的 ES模块构建。

启用导入映射 ​

在上面的示例中，我们从完整的CDN URL导入，但在其余的文档中，您将看到类似这样的代码

import { createApp } from 'vue'

我们可以通过使用 导入映射 来教浏览器在哪里找到 vue 的导入

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

您还可以将其他依赖项的条目添加到导入映射中 - 但请确保它们指向您打算使用的库的ES模块版本。

模块拆分 ​

随着我们深入了解指南，我们可能需要将代码拆分为单独的JavaScript文件，以便更容易管理。例如

<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>

// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}

// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}

如果你直接在浏览器中打开上面的 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*/ 注释，以获得它们的语法高亮。

下一步 ​

如果你跳过了 简介，我们强烈建议你在继续阅读其他文档之前先阅读它。