Vue 入门

Vue 是一款现代 JavaScript 框架，它提供了用于渐进增强（Progressive Enhancement）的有用工具——与许多其他框架不同，您可以使用 Vue 来增强现有的 HTML。这使您可以将 Vue 作为 jQuery 等库的直接替代品。

也就是说，您也可以使用 Vue 来编写完整的单页面应用程序 (SPA)。这允许您创建完全由 Vue 管理的标记，在处理复杂的应用程序时，可以提高开发人员体验和性能。当您需要时，它还允许您利用客户端路由和状态管理库。此外，Vue 采取了一种“折中”的方式来处理客户端路由和状态管理等工具。虽然 Vue 核心团队为这些功能维护了建议的库，但它们并没有直接捆绑到 Vue 中。这允许您选择不同的路由/状态管理库，如果它们更适合您的应用程序。

除了允许您将 Vue 逐步集成到您的应用程序中之外，Vue 还提供了一种逐步编写标记的方法。像大多数框架一样，Vue 允许您通过组件创建可重用的标记块。大多数情况下，Vue 组件使用特殊的 HTML 模板语法编写。当您需要比 HTML 语法允许的更多控制时，您可以编写 JSX 或纯 JavaScript 函数来定义您的组件。

在完成本教程的过程中，您可能希望在其他选项卡中打开 Vue 指南 和 API 文档，以便在需要有关任何子主题的更多信息时可以参考它们。

要在现有站点中使用 Vue，您可以将以下 <script> 元素之一放到页面上。这允许您开始在现有站点上使用 Vue，这就是 Vue 以渐进式框架而自豪的原因。当使用像 jQuery 这样的库迁移现有项目到 Vue 时，这是一个很好的选择。使用此方法，您可以使用 Vue 的许多核心功能，例如属性、自定义组件和数据管理。

• 开发脚本（未优化，但包含控制台警告，这对于开发非常有用。）
  html

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

• 生产脚本（优化版本，控制台警告最少。建议您在网站上包含 Vue 时指定版本号，以便任何框架更新都不会在您不知情的情况下破坏您的实时网站。）
  html

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

但是，这种方法有一些限制。要构建更复杂的应用程序，您需要使用 Vue npm 包。这将允许您使用 Vue 的高级功能并使用 Vite 或 WebPack 等工具。为了使使用 Vue 构建应用程序更容易，有一个 CLI 脚手架工具 create-vue 用于简化开发过程。要使用 create-vue，您需要

1. 安装 Node.js 20。
2. npm 或 yarn。

要安装 Vue 并初始化一个新项目，请在您的终端中运行以下命令

npm create vue@latest

或者，如果您更喜欢使用 yarn

yarn create vue@latest

此命令将为您提供一个您可以使用的项目配置列表。有一些默认值，但您可以选择您自己的项目特定设置。这些选项允许您配置 TypeScript、代码风格检查、vue-router、测试等内容。我们将在下面的初始化步骤中逐步介绍这些选项。

为了探索 Vue 的各种功能，我们将构建一个示例待办事项列表应用程序。我们将首先使用 create-vue 为我们的应用程序构建一个新的脚手架。在终端中，cd 到您想要创建示例应用程序的位置，然后运行 npm create vue@latest（或者如果您更喜欢 Yarn，则运行 yarn create vue@latest）。

交互式工具允许您选择一些选项，您可以通过按 Enter 键继续。对于此项目，我们将使用以下配置

✔ Project name: … todo-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … Yes
? Add Prettier for code formatting? › Yes

选择这些选项后，您的项目结构现在已配置，并且依赖项在 package.json 文件中定义。接下来的步骤是安装依赖项并启动服务器，该工具会方便地打印出您需要执行的命令

Scaffolding project in /path/to/todo-vue...

Done. Now run:

  cd todo-vue
  npm install
  npm run format
  npm run dev

如果一切顺利，CLI 应该会为您的项目创建一系列文件和目录。最重要的文件如下

• package.json：此文件包含项目依赖项列表，以及一些元数据和 eslint 配置。
• yarn.lock：如果您选择 yarn 作为您的包管理器，则将生成此文件，其中包含项目所需的所有依赖项和子依赖项的列表。
• jsconfig.json：这是 Visual Studio Code 的配置文件，并为 VS Code 提供项目结构的上下文，并协助自动完成。
• vite.config.js：这是 Vite 开发服务器的配置文件，该服务器在本地机器上构建和服务您的项目。Vite 服务器监视源文件以进行更改，并在您进行更改时热重载项目。
• public：此目录包含在构建期间发布的静态资产。
  • favicon.ico：这是您的应用程序的 favicon。目前，它是 Vue 徽标。
• index.html：您的 Vue 应用程序从此 HTML 页面运行。
• src：此目录包含 Vue 应用程序的核心。
  • main.js：这是应用程序的入口点。目前，此文件初始化您的 Vue 应用程序，并指示您的应用程序应附加到 index.html 文件中的哪个 HTML 元素。此文件通常是您注册全局组件或其他 Vue 库的地方。
  • App.vue：这是 Vue 应用程序中的顶级组件。有关 Vue 组件的更多解释，请参见下文。
  • components：此目录用于保存您的组件。目前，它只有一个示例组件。
  • assets：此目录用于存储静态资产，如 CSS 和图像。由于这些文件位于源目录中，因此可以由 Webpack 处理。这意味着您可以使用 Sass/SCSS 或 Stylus 等预处理器。

就像在许多前端框架中一样，组件是使用 Vue 构建应用程序的核心部分。这些组件允许您将大型应用程序分解成离散的构建块，这些构建块可以分别创建和管理，并在需要时相互之间传递数据。这些小块可以帮助您推理和测试代码。

虽然一些框架鼓励您将模板、逻辑和样式代码分离到单独的文件中，但 Vue 采取了相反的方法。使用 单文件组件 (SFC)，Vue 允许您将模板、相应的脚本和 CSS 全部组合到一个以 .vue 结尾的文件中。这些文件由 JS 构建工具（如 Vite 或 Webpack）处理，这意味着您可以在项目中利用构建时工具。这允许您使用 Babel、TypeScript、SCSS 等工具来创建更复杂的组件。

让我们查看使用 CLI 创建的项目中的 src 文件夹，并检查您的第一个 .vue 文件：App.vue。

打开您的 App.vue 文件——您会看到它有三个部分：<template>、<script> 和 <style>，它们包含组件的模板、脚本和样式信息。所有单文件组件都共享相同的基本结构。

<template> 包含组件的所有标记结构和显示逻辑。您的模板可以包含任何有效的 HTML，以及我们将在后面介绍的一些 Vue 特定语法。

<script> 包含组件的所有非显示逻辑。最重要的是，您的 <script> 标记是您在本地注册组件、定义组件输入（props）、处理本地状态、定义方法等等的地方。您的构建步骤将处理此对象并将其（与您的模板）转换为具有 render() 函数的 Vue 组件。

在 App.vue 的情况下，通过导入的方式注册了两个组件 TheWelcome 和 HelloWorld。当您以这种方式注册组件时，您是在本地注册它。本地注册的组件只能在注册它们的组件内部使用，因此您需要在每个使用它们的组件文件中导入并注册它们。这对于 Tree shaking（不加载未使用的代码）和捆绑拆分（仅在需要时加载代码）很有用，因为并非应用程序中的每个页面都一定需要每个组件。

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import TheWelcome from "./components/TheWelcome.vue";
</script>

<style> 是您为组件编写 CSS 的地方。如果您添加 scoped 属性——<style scoped>——Vue 将样式范围限定到 SFC 的内容。这与 CSS-in-JS 解决方案类似，但允许您只编写纯 CSS。

create-vue 工具内置了 Vite 作为开发服务器。这允许你在本地运行你的应用，以便轻松测试，而无需从头配置服务器。CLI 将命令作为 npm 脚本添加到项目的 package.json 文件中，以便你可以轻松运行它们。

在你的终端中，尝试运行 npm run dev（或者如果你更喜欢 yarn，则运行 yarn dev）。你的终端应该输出类似以下内容

  VITE v5.0.11  ready in 312 ms

  ➜  Local:   https://127.0.0.1:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

如果你在新的浏览器标签页中导航到“localhost”地址，你应该会看到你的应用（此地址应为 https://127.0.0.1:5173/，如上所述，但可能因你的设置而异）。现在，应用应该包含欢迎消息、指向 Vue 文档的链接、你在使用 CLI 初始化应用时添加的插件的链接，以及一些指向 Vue 社区和生态系统的其他有用链接。

让我们对应用进行第一次更改——我们将删除 Vue 徽标。打开 App.vue 文件，并从模板部分删除 <img> 元素

<img
  alt="Vue logo"
  class="logo"
  src="./assets/logo.svg"
  width="125"
  height="125" />

如果你的服务器仍在运行，你应该会立即看到徽标从渲染的站点中移除。我们也从模板中移除 HelloWorld 组件。

首先删除这一行

<HelloWorld msg="You did it!" />

如果你现在保存你的 App.vue 文件，你的编辑器可能会显示错误，因为我们已注册了 HelloWorld 组件但没有使用它。我们还需要从 <script> 元素内部移除导入和注册组件的行

现在删除这些行

import HelloWorld from "./components/HelloWorld.vue";

如果你删除 <template> 标签内的所有内容，你将在编辑器中看到一条错误消息，提示 模板需要子元素。你可以通过在 <template> 标签内添加一些内容来解决此问题，我们可以从 <div> 内部的新的 <h1> 元素开始。因为我们将在下面创建一个待办事项列表应用，所以让我们将标题设置为“待办事项列表”，如下所示

<template>
  <div id="app">
    <h1>To-Do List</h1>
  </div>
</template>

App.vue 现在将显示我们的标题，正如你所期望的那样。

让我们暂时保留在这里。我们了解了 Vue 背后的一些概念，为我们的示例应用创建了一些脚手架以在其内部运行，检查了它并进行了一些初步更改。

在基本介绍之后，我们将更进一步，构建我们的示例应用，一个基本的待办事项列表应用，它允许我们存储项目列表，在完成时将它们勾选，并按所有、已完成和未完成的任务过滤列表。

在下一篇文章中，我们将构建我们的第一个自定义组件，并了解一些重要的概念，例如向其中传递道具和保存其数据状态。

• 上一个
• 概述：理解客户端 JavaScript 框架
• 下一个