作者选择Open Sourcing Mental Illness接受捐赠，作为Write for DOnations计划的一部分。

介绍

Vue.js是一种流行的JavaScript框架，用于创建用户界面。Vue.js 于 2014 年由 Evan You（原 Google）创建，经常被描述为React和Angular的结合，借用了React的道具驱动开发和Angular的模板能力。这使得 Vue 成为初学者容易上手的框架，特别是因为它专注于传统的HTML和CSS，而不是像 React 这样的CSS-in-JS框架，或者像 Angular 那样依赖TypeScript（JavaScript 的超集）。

开始一个新项目时，最好熟悉该技术的工具和功能。Vue.js 开发的一项重要工具是其命令行界面 (CLI)，称为Vue CLI 3。该Vue的CLI提供了许多增强的Vue公司的发展经验有用的功能，但主要的特点是它的产生和预先配置了新的能力，单页的应用程序与vue create命令。

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

先决条件

要遵循本教程，您将需要以下内容：

• 10.6.0您的计算机上安装了Node.js版本或更高版本。要在 macOS 或 Ubuntu 18.04 上安装它，请按照如何在 macOS 上安装 Node.js 和创建本地开发环境中的步骤或如何在 Ubuntu 18.04 上安装 Node.js 的使用 PPA部分进行安装

• 您还需要具备 JavaScript、HTML 和 CSS 的基本知识，您可以在我们的如何使用 HTML 系列构建网站、如何使用 CSS 系列构建网站和如何使用 JavaScript 编码中找到这些知识。

第 1 步 – 下载 Vue CLI 3

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

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

npm i -g @vue/cli

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

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

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

vue --version

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

Output
@vue/cli 4.5.6

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

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

步骤 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中将没有（哈希）。如果您确实使用历史模式，您将需要一个Node 服务器来运行您的项目。这不是问题，因为 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 可以在开发过程中强制执行一些语法规则。除此之外，您的集成开发环境 (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选择了一组要强制执行的规则。这些配置包括使用尾随逗号、行尾分号或在 JavaScript 中使用constover 等选项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 徽标和您在前面步骤中选择的技术的欢迎屏幕。

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

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

第 3 步 – 创建标题组件

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

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

ls

您将收到以下输出：

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目录中右键单击并在 VS Code 等 IDE 中创建一个新文件。如果您更喜欢终端命令，您可以在计算机终端中使用 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：

<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在文本编辑器中打开文件，然后删除divID 为 的nav并添加以下突出显示的代码：

<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. 由于热模块重新加载，您现在可以在页面顶部找到新创建的标题：

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

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

<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>在文件末尾创建一个标签。

<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 lang="scss">
</style>

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

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

...
<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样式位于headerSCSS 块内。在传统 CSS 中，这是不允许的，但感谢 SCSS，您可以做到。这称为嵌套。在这种情况下，p内部与传统 CSS 中的header选择相同header p。

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

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

第 4 步 – 创建页脚组件

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

touch src/components/AppFooter.vue

和以前一样，import这到您的App.vue文件中。打开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 标记：

<template>
  <footer>
    <p>Copyright &copy; "current year" </p>
  </footer>
</template>

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

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

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

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

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

...
<script>
import { computed } from 'vue'

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

之后，您将需要提供对<template>为消费和渲染创建的计算属性的访问。year在setup()函数中返回一个具有属性和值的对象：

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

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

<template>
  <footer>
    <p>Copyright &copy; {{ year }}</p>
  </footer>
</template>

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

结论

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

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

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