Vue 入门

更清晰的 Vue

Vue 是一个现代 JavaScript 框架，为渐进式增强提供了有用的功能——与许多其他框架不同，你可以使用 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、linting、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 中构建应用程序的核心部分。这些组件允许你将大型应用程序分解为离散的构建块，这些构建块可以单独创建和管理，并根据需要相互传输数据。这些小块可以帮助你推理和测试代码。

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

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

App.vue

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

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

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

在 App.vue 的例子中，两个组件 TheWelcome 和 HelloWorld 通过导入方式注册。当你以这种方式注册组件时，你是在本地注册它。本地注册的组件只能在注册它们的组件内部使用，因此你需要在每个使用它们的组件文件中导入并注册它们。这对于摇树优化（不加载未使用的代码）和捆绑包拆分（仅在需要时加载代码）非常有用，因为你的应用程序中的每个页面不一定需要每个组件。

<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://:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

如果你在新浏览器标签页中导航到“localhost”地址，你应该会看到你的应用程序（这个地址应该是上面所述的 https://: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> 标签内的所有内容，你的编辑器中会显示错误消息 The template requires child element。你可以通过在 <template> 标签内添加一些内容来修复此问题，我们可以从 <div> 内的一个新的 <h1> 元素开始。由于我们将在下面创建一个待办事项列表应用程序，所以我们将标题设置为“To-Do List”，如下所示：

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

现在，App.vue 将按预期显示我们的标题。

总结

让我们暂时停在这里。我们已经了解了 Vue 背后的一些概念，为我们的示例应用程序创建了一些脚手架，检查了它，并进行了一些初步更改。

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

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

• 概述：JavaScript 框架和库
• 下一页