如何使用 Vue CLI 生成 Vue.js 单页应用程序

小咪咪 2023-10-01 18:30 12阅读 0赞

#### [How To Generate a Vue.js Single Page App With the Vue CLI | DigitalOcean][How To Generate a Vue.js Single Page App With the Vue CLI _ DigitalOcean] ####

#### 介绍 ####

[Vue.js][]是一个流行的用于创建用户界面的[JavaScript][]框架。Vue.js 由 Evan You（前身为 Google）于 2014 年创建，通常被描述为[React][]和[Angular][]的组合，借用了React 的[prop][]驱动开发和 Angular 的模板功能。这使得 Vue 成为一个可供初学者学习的易于使用的框架，特别是因为它专注于传统的[HTML][]和[CSS][]，而不是像 React 那样的[CSS-in-JS][]框架或像 Angular 那样依赖[TypeScript][]（JavaScript 的超集）。

开始一个新项目时，最好熟悉该技术的工具和功能。Vue.js 开发的一个重要工具是其称为[Vue CLI 3][]的命令行界面 (CLI) 。Vue CLI 提供了许多有用的功能来增强 Vue 开发体验，但主要功能是它能够使用命令生成和预配置新的[单页应用程序][Link 1]`vue create`。

在本教程结束时，您将拥有一个在本地[Node][]服务器上运行的 Vue.js 应用程序。该本地服务器通过[Webpack][]使用热模块重新加载来提供即时反馈，并在您工作时在浏览器中呈现。在此过程中，您将创建`.vue`单文件组件 (SFC)，例如页眉和页脚。所有这些你都可以保存为任何未来的 Vue 项目的坚实基础。

### 先决条件 ###

要学习本教程，您将需要以下内容：

*  `10.6.0`您的计算机上安装了[Node.js][]版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照[如何在 macOS 上安装 Node.js 和创建本地开发环境][macOS _ Node.js]或[如何在 Ubuntu 18.04 上安装 Node.js的][Ubuntu 18.04 _ Node.js]**使用 PPA 安装**部分中的步骤进行操作
 *  您还需要 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的[如何使用 HTML 构建网站系列][HTML]、[如何使用 CSS 构建网站系列][CSS]以及[如何使用 JavaScript 编码中][JavaScript]找到这些知识。

### 第 1 步 — 下载 Vue CLI 3 ###

要下载 Vue CLI 3，您需要通过[npm][]或[Yarn][]运行命令，无论您喜欢哪个。npm 或 Node Package Manager 是一种下载和管理其他人的代码以在您的项目中作为依赖项使用的方法。另一方面，Yarn 在后台执行 NPM 命令，但提供缓存等附加功能。使用哪一个取决于个人喜好。但是，需要注意的是，不建议混合命令。最好在项目期间与其中之一保持一致。

展望未来，本教程将使用 npm 命令。以下命令将从注册器下载必要的 Vue CLI 文件，在本例中是[npm（节点包管理器）服务][npm 1]：

npm i -g @vue/cli

**注意：** 在某些系统上，全局安装 npm 包可能会导致权限错误，从而中断安装。由于避免使用`sudo`with是一种安全最佳实践`npm install`，因此您可以通过更改 npm 的默认目录来解决此问题。如果遇到`EACCES`错误，请按照[官方 npm 文档中的说明进行操作][npm 2]。

您可以全局安装它，以便在您机器上的任何地方使用 CLI。如果你不全局安装它，它只会在你安装它的目录中工作。在命令选项的情况下，`i`表示“安装”并且`-g`是在您的计算机上全局安装代码的标志。

要验证是否正确安装了 Vue CLI 3，请运行以下命令：

vue --version

您将收到以下带有版本号的输出。您的版本号可能不同，但如果您收到带有版本号的响应，则说明您已正确安装 Vue CLI 3：

`Output`

`@vue/cli 4.5.6`

要更新 Vue CLI 3，请运行本节前面的命令，将安装最新版本。

至此，您已经成功下载了 npm 以及 Vue CLI 工具，您将在下一节中使用该工具来创建生成的 Vue.js 项目。

### 第 2 步 — 生成单页应用程序 ###

在开发 Vue.js 应用程序时，您可能会发现手动配置项目并不是最有效地利用您的时间，因为从头开始配置一个新的 Vue.js 项目可能需要数小时。这是 Vue CLI 的真正强大之处：它为您提供了一个基于您的规范的预生成模板。因此，它已经配置好，因此您可以立即开始开发您的网站或应用程序。Vue CLI 3 将通过命令行提示询问您关于项目的几个问题，下载所需文件，并为您进行预配置，以便您在完成后立即准备工作。

要生成单页应用程序，请导航到您希望 Vue 项目所在的目录，然后运行以下命令：

vue create vue-starter-project

该命令的突出显示部分是项目根目录的名称。这将是包含所有 Vue.js 项目文件的文件夹的名称。这可以是您想要的任何内容，但在本教程中，您将使用`vue-starter-project`.

键入该命令后，按 继续`Enter`。然后您将收到以下提示：

Vue CLI v4.5.6
    ? Please pick a preset: 
      Default ([Vue 2] babel, eslint) 
      Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
    ❯ Manually select features

如果您不想配置您的项目并选择默认设置，您可以使用 Vue 2 或 Vue 3 进行配置。不过，出于本教程的目的，建议您手动选择您的功能。通过选择特定功能，您将看到 CLI 如何安装您选择的每个选项。

`Manually select features`用选择`ENTER`。您将立即收到许多不同的选项，包括：`Choose Vue version`、`TypeScript`、`Router`和`Vuex`。请注意，其中一些项目已被选中（已填充气泡）。您可以根据需要选择尽可能多的或尽可能少的。但是，对于本教程，通过按`<space>`条目选择以下内容：

...
     ◉ Choose Vue version
     ◉ Babel
     ◉ TypeScript
     ◯ Progressive Web App (PWA) Support
     ◉ Router
     ◉ Vuex
     ◉ CSS Pre-processors
     ◉ Linter / Formatter
    ❯◯ Unit Testing
     ◯ E2E Testing

选择选项后，按`ENTER`键。CLI 将按顺序向您询问有关您为项目选择的每个功能的更多问题。第一个问题将询问您要使用哪个版本的 Vue：`2.x`或`3.x`. 您将在本教程中使用 Vue 3，但如果您希望获得 Vue 社区的更多支持，您可能需要使用 Vue 2：

...
    ? Choose a version of Vue.js that you want to start the project with 
      2.x 
    ❯ 3.x (Preview)

下一个问题是关于 TypeScript 集成的。如果你不熟悉 TypeScript，没关系。特意选择此选项来说明 Vue CLI 3 如何下载您定义为独特项目所需的内容。本教程不会使用类风格的语法，而是使用[Babel][]和 TypeScript。

遇到以下情况时，输入`N`：

...
    Use class-style component syntax? (y/N) N

在以下提示中，输入`Y`：

...
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y

接下来，Vue CLI 会询问历史模式。*历史模式*将使每个路由都有自己的 URL。这意味着您的应用程序 URL 中不会包含`/#/`(hash)。如果您确实使用历史模式，您将需要一个[Node 服务器][Node 1]来运行您的项目。这不是问题，因为 Vue CLI 3 为您提供了 Node 服务器。

键入`Y`以对历史模式回答“是”：

...
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y

下一个问题是关于 CSS 预处理器，例如[Sass][]或[LESS][]。*CSS 预处理器*是带有嵌套和变量等附加功能的 CSS 。浏览器无法读取此内容，因此在构建项目时，Node 会将您的所有[SCSS][]或 LESS 代码编译为传统 CSS。由于您使用 Node 来构建您的项目，因此建议选择`Sass/SCSS (with node-sass)`作为您的预处理器。稍后，您将在组件中添加`lang`属性以`.vue`在每个组件的基础上启用 SCSS：

...
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
      Sass/SCSS (with dart-sass) 
    ❯ Sass/SCSS (with node-sass) 
      Less 
      Stylus

之后，您将收到一些关于 linter 样式的问题。linter是一个在您开发应用程序*时*评估您的代码的程序。这个 linter 可以在开发过程中强制执行许多语法规则。除此之外，您的[集成开发环境 (IDE)][_IDE]可以读取此配置文件并在保存时格式化您的代码。无论谁在您的项目上工作以及开发人员使用什么操作系统或 IDE，这都将使您的代码保持一致。

对于本教程，选择`ESLint + Standard config`：

...
    ? Pick a linter / formatter config: 
      ESLint with error prevention only 
      ESLint + Airbnb config 
    ❯ ESLint + Standard config 
      ESLint + Prettier 
      TSLint (deprecated)

[这会为ESLint][ESLint]选择一组规则来强制执行。这些配置包括使用尾随逗号、行尾分号或在 JavaScript 中使用`const`over等选项。`var`

下一个选项是选择您希望 ESLint 何时格式化您的代码。这可以在保存时，也可以在您将代码提交到[GitHub][]、[GitLab][]或[BitBucket][]等服务时。建议选择`Lint on save`，以便您可以在提交版本控制之前查看任何更改：

...
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    ❯◉ Lint on save
     ◯ Lint and fix on commit

一旦你选择了你的 lint 特性，Vue CLI 会询问你想如何存储这些配置，无论是在专用文件中还是在`package.json`. 出于几个原因，将配置存储在自己的文件中被认为是标准做法。一，通过这种方式在项目之间共享配置更容易，二，您将`package.json`通过仅定义有关您的应用程序的重要信息来保持您的尽可能清晰：

...
    ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
    ❯ In dedicated config files 
      In package.json

完成后，CLI 工具将询问您是否要将此选择保存为未来项目的预设。如果您正在为您的雇主生成项目并且您希望一切都保持一致，这将非常有用。

继续将此配置保存为预设；Vue CLI 会要求你重命名它。命名它`DigitalOcean Vue Tutorial Series`：

...
    ? Save this as a preset for future projects? Yes
    ? Save preset as: DigitalOcean Vue Tutorial Series

现在，您可以将这些完全相同的设置用于未来的项目。

此时，您将在终端中获得类似的内容，总结您的所有选项：

? Please pick a preset: Manually select features
    ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
    ? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
    ? Use class-style component syntax? No
    ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
    ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
    ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: Lint on save
    ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? (y/N)

按`ENTER`，Vue CLI 将开始创建您的应用程序。

完成后，`cd`（更改目录）在您的项目名称 ( `vue-starter-project`) 中：

cd vue-starter-project

接下来，使用 启动应用程序`npm run serve`。`localhost`这通常会在您的端口上运行您的项目`:8080`。如果是不同的端口，CLI 会告诉你：

npm run serve

您不需要下载依赖项，因为 CLI 已经为您完成了。要查看您生成的项目，请打开您选择的浏览器并`localhost:8080`在 URL 栏中访问。您将看到一个带有 Vue 徽标和您在前面步骤中选择的技术的欢迎屏幕。

![3adb4c4743cdede5ac5a7c5d16991eb5.png][]

您可以让此服务器在整个教程中一直运行以监控您的更改。

在本节中，您选择了一些特定于您正在创建的项目的选项。Vue CLI 下载了所有需要的代码并为您预先配置了它。您现在可以开始在生成的代码库中工作，包括创建您自己的单文件`.vue`组件。

### 第 3 步 - 创建标题组件 ###

现在您已经在 Node 服务器上运行了一个单页应用程序，通过创建标准页眉和页脚对其进行一些更改。这些`AppHeader.vue`和`AppFooter.vue`组件将以它们出现在每条路线上的方式导入。

在新的终端窗口中，导航到文件夹的根`vue-starter-project`目录并使用以下命令列出文件：

您将收到以下输出：

`Output`

`README.md babel.config.js node_modules package-lock.json package.json public src tsconfig.json`

您还可以通过在您选择的编辑器中打开项目来查看项目的内容，例如[Visual Studio Code][]。无论哪种情况，您都可以访问许多不同的文件和目录。根目录中的这些配置文件是由于在此项目的初始生成期间所做的选择而创建的。该选项`In dedicated config files`告诉 Vue CLI 为您正在使用的每个服务创建`config.js`文件，例如 Babel、TypeScript 和 ESLint。除了这些文件之外，还有许多目录。本教程将在您了解这些内容时进行介绍。

首先，在目录中创建一个`.vue`文件`components`并将其命名为`AppHeader.vue`. 您可以在目录中右键单击`components`并在 IDE （如 VS Code）中创建一个新文件。如果您更喜欢终端命令，您可以在计算机的终端中使用 bash 命令执行此操作`touch`：

touch src/components/AppHeader.vue

在这一步中，您将创建一个单文件组件，该组件将包含这段代码所需的所有 HTML、JavaScript 和 SCSS。每个`.vue`组件都包含三个基本关注点或部分：`<template>`、`<script>`和`<style>`。在本例中，`template`是组件的 HTML。

在文本编辑器中打开新文件。

`<header>`在此文件中，使用`<template>`. 在其中`<header>`，添加 Vue.js 徽标和一个`<p>`包含以下内容的元素`My Vue.js Application`：

vue-starter-project/src/components/AppHeader.vue

<template>
      <header>
        <img alt="Vue logo" src="../assets/logo.png" height="50">
        <p>My Vue.js Application</p>
      </header>
    </template>

在整个开发过程中保持您的开发服务器运行。如果您关闭或取消服务器进程，您将无法在浏览器中查看您的应用程序。

保存文件。

此时，当您打开浏览器时，您将看不到呈现的 HTML。那是因为您需要`import`将新创建`AppHeader.vue`的组件转换为已经安装的组件。由于`App.vue`是您的主要入口点，因此最好将其导入那里，以便我们的标题出现在每条路线上。

`App.vue`在文本编辑器中打开文件，然后删除`div`ID`nav`并添加以下突出显示的代码：

vue-starter-project/src/App.vue

<template>
      <app-header />
      <router-view/>
    </template>
    
    <script>
    import AppHeader from '@/components/AppHeader.vue'
    
    export default {
      components: {
        AppHeader
      }
    }
    </script>

当您使用 ES6 导入时，您实际上是在创建一个变量以供以后在代码中引用。在这种情况下，您将代码存储`AppHeader.vue`到一个名为`AppHeader`. 您需要先通过该`components`属性进行注册，然后才能使用它。

导入后，您删除`#nav`了模板中的 并`<app-header />`在`<router-view />`. 这会在 HTML 中呈现组件。

完成此步骤后，保存所有未保存的文件并打开浏览器返回`localhost:8080`. 由于热模块重新加载，您现在将在页面顶部找到新创建的标题：

![4edf0979496788c45e57eb547a51a317.png][]

您现在已经创建了一个单文件 Vue 组件，用于`import`将其放入已安装的组件中，并通过热模块重载 (HMR) 监控更改。展望未来，您将通过使用子组件来扩展组件的功能。您还将在每个组件的基础上使用 SCSS（您之前选择的预处理器）和`lang`属性。

现在标题已正确导入应用程序，返回到`AppHeader.vue`您的文本编辑器。`<p>My Vue.js Application</p>`通过添加以下突出显示的代码在下方添加导航：

vue-starter-project/src/components/AppHeader.vue

<template>
      <header>
        <img alt="Vue logo" src="../assets/logo.png" height="50">
        <p>My Vue.js Application</p>
        <nav>
          <ul>
            <li><router-link to="/">Home</router-link></li>
            <li><router-link to="/about">About</router-link></li>
          </ul>
        </nav>
      </header>
    </template>

现在，对其进行样式设置，使其看起来更像一个传统的导航栏。`<style>`在文件末尾创建一个标签。

vue-starter-project/src/components/AppHeader.vue

在初始设置期间，您选择了该`Sass/SCSS (with node-sass)`选项。这就是您将`lang="scss"`属性添加到`style`标签的原因。如果您不熟悉 SCSS，建议查看其[官方文档][Link 2]以了解何时使用嵌套或变量的详细信息。

此`lang`属性将使您能够在单文件组件中编写 SCSS。在元素中添加以下突出显示的内容`style`：

vue-starter-project/src/components/AppHeader.vue

...
    <style lang="scss">
      header {
        display: flex;
        border-bottom: 1px solid #ccc;
        padding: .5rem 1rem;
    
        p {
          margin-left: 1rem;
        }
      }
    
      nav {
        margin-left: auto;
    
        ul {
          list-style: none;
        }
    
        ul li {
          display: inline-flex;
          margin-left: 1rem;
        }
      }
    </style>

这个 SCSS 创建了一个带有声明的水平导航栏`display: inline-flex`（使用[Flexbox][]）并用`margin-left auto`. 为了将标题与其余内容分开，应用了一些填充`padding: .5rem 1rem`以及使用`border-bottom: 1px solid #ccc`. 您可能会注意到`p`样式位于`header`SCSS 块内。在传统的 CSS 中，这是不允许的，但感谢 SCSS，您可以这样做。这称为*嵌套*。在这种情况下，`p`里面的选择与传统 CSS`header`中的选择相同。`header p`

保存您的文件并`localhost:8080`在浏览器中导航到以查找新样式：

![ab57a551c3214dc6c9987fa92e1c46e4.png][]

您现在已经创建并设置了标题组件的样式。接下来，您将创建页脚组件。

### 第 4 步 - 创建页脚组件 ###

现在您有了页眉，您将使用页脚完成示例应用程序。在同一`components`目录中，创建一个名为 的新文件`AppFooter.vue`。创建此组件的过程与创建`AppHeader.vue`. 您可以在编辑器中或通过`touch`基本命令创建文件。

touch src/components/AppFooter.vue

和以前一样，`import`将其放入您的`App.vue`文件中。打开`App.vue`并添加以下突出显示的代码：

vue-starter-project/src/App.vue

<template>
      <app-header />
      <router-view/>
      <app-footer />
    </template>
    
    <script>
    import AppHeader from '@/components/AppHeader.vue'
    import AppFooter from '@/components/AppFooter.vue'
    
    export default {
      components: {
        AppHeader,
        AppFooter
      }
    }
    </script>
    ...

这一次，您将在`router-view`标记之后导入组件。

保存文件，然后打开`AppFooter.vue`. 在您的`AppFooter.vue`文件中，使用`<footer>`带有段落的 HTML 标记：

vue-starter-project/src/components/AppFooter.vue

你现在有一个基本的页脚。继续对此进行扩展，以编程方式包括本年度。这将是动态的，具体取决于年份。为此，您将创建一个*计算*属性。计算属性是使用 JavaScript 计算的反应值。

在 Vue 3 中，您需要将属性包装在`setup()`函数中并返回这些值。本质上，你是在告诉 Vue 构建这个组件并提供`template`给这些响应式计算属性。

要创建计算属性，您首先需要`computed`从`vue`库中解构函数。您将将此计算函数及其值存储到`const`. 在 Vue 3 中，您需要传递一个返回值的匿名函数：

const year = computed(() => new Date().getFullYear())

复制

要将`setup`函数添加到文件中，请将以下脚本添加到末尾`AppFooter.vue`：

vue-starter-project/src/components/AppFooter.vue

...
    <script>
    import { computed } from 'vue'
    
    export default {
      setup () {
        const year = computed(() => new Date().getFullYear())
      }
    }
    </script>

之后，您将需要提供对您创建的计算属性的访问权限，`<template>`以便使用和呈现。在函数中返回具有`year`属性和值的对象`setup()`：

/vue-starter-project/src/components/AppFooter.vue

...
    setup () {
      const year = computed(() => new Date().getFullYear())
      return { year }
    }
    ...

要在 中使用此值`<template>`，请使用带双花括号的插值。这有时被称为“小胡子语法”：

/vue-starter-project/src/components/AppFooter.vue

保存文件。您现在将在页脚中显示当前年份：

![c8807a7838a7d7ad17370e0a279a2ae5.png][]

### 结论 ###

`AppHeader.vue`在本教程中，您下载了 Vue CLI 并使用和创建了自己的单文件组件`AppFooter.vue`。您成功地生成了一个 Vue.js 单页应用程序 (SPA)，其中包含初始设置中的选定功能，并了解了所有这些部分是如何组合在一起的。此外，您现在已经查看了大多数 SPA 的基本架构，并且可以使用这些知识进一步扩展该项目。

Vue.js 是一个不断发展的生态系统，您可以随意使用许多工具。这些工具可以通过将选项存储为预设来帮助您快速入门并节省时间。这只是 Vue.js 所提供的开始，但 CLI 可能是您将在 Vue.js 旅程中使用的最重要的工具之一。

有关[Vue.js][Vue.js 1]和[Vue CLI 3][]的更多信息，建议阅读他们的文档。CLI 工具特别具有本教程未涵盖的许多附加功能。有关 Vue 的更多教程，请查看[Vue 主题页面][Vue]。

[How To Generate a Vue.js Single Page App With the Vue CLI _ DigitalOcean]: https://www.digitalocean.com/community/tutorials/how-to-generate-a-vue-js-single-page-app-with-vue-create
[Vue.js]: https://vuejs.org/
[JavaScript]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript
[React]: https://reactjs.org/
[Angular]: https://angular.io/
[prop]: https://www.digitalocean.com/community/tutorials/how-to-customize-react-components-with-props
[HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[CSS]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css
[CSS-in-JS]: https://en.wikipedia.org/wiki/CSS-in-JS
[TypeScript]: https://www.typescriptlang.org/
[Vue CLI 3]: https://cli.vuejs.org/
[Link 1]: https://en.wikipedia.org/wiki/Single-page_application
[Node]: https://www.digitalocean.com/community/tutorial_series/how-to-code-in-node-js
[Webpack]: https://webpack.js.org/
[Node.js]: https://nodejs.org/en/
[macOS _ Node.js]: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on-macos
[Ubuntu 18.04 _ Node.js]: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04
[npm]: https://www.npmjs.com/
[Yarn]: https://yarnpkg.com/
[npm 1]: https://www.npmjs.com/package/@vue/cli
[npm 2]: https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally
[Babel]: https://babeljs.io/
[Node 1]: https://www.digitalocean.com/community/tutorials/how-to-create-a-web-server-in-node-js-with-the-http-module
[Sass]: https://sass-lang.com/documentation
[LESS]: http://lesscss.org/
[SCSS]: https://sass-lang.com/documentation/syntax#scss
[_IDE]: https://en.wikipedia.org/wiki/Integrated_development_environment
[ESLint]: https://eslint.org/
[GitHub]: https://github.com/
[GitLab]: https://about.gitlab.com/
[BitBucket]: https://bitbucket.org/
[3adb4c4743cdede5ac5a7c5d16991eb5.png]: https://img-blog.csdnimg.cn/img_convert/3adb4c4743cdede5ac5a7c5d16991eb5.png
[Visual Studio Code]: https://code.visualstudio.com/
[4edf0979496788c45e57eb547a51a317.png]: https://img-blog.csdnimg.cn/img_convert/4edf0979496788c45e57eb547a51a317.png
[Link 2]: https://sass-lang.com/documentation/syntax
[Flexbox]: https://www.digitalocean.com/community/cheatsheets/css-flexbox
[ab57a551c3214dc6c9987fa92e1c46e4.png]: https://img-blog.csdnimg.cn/img_convert/ab57a551c3214dc6c9987fa92e1c46e4.png
[c8807a7838a7d7ad17370e0a279a2ae5.png]: https://img-blog.csdnimg.cn/img_convert/c8807a7838a7d7ad17370e0a279a2ae5.png
[Vue.js 1]: https://v3.vuejs.org/
[Vue]: https://www.digitalocean.com/community/tags/vue-js