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

来自菜鸟教程
跳转至：导航、​搜索

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

介绍

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

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

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

先决条件

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

第 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 包会导致权限错误，从而中断安装。 由于避免将 sudo 与 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 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 如何安装您选择的每个选项。

用 ENTER 选择 Manually select features。 您将立即收到许多不同的选项，包括：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 会询问历史模式。 History 模式 将使每个路由都有自己的 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) 作为您的预处理器。 稍后，您将在 .vue 组件中添加 lang 属性，以在每个组件的基础上启用 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，这都将使您的代码保持一致。

对于本教程，选择 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 中使用 const 而不是 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 已经为您完成了。 要查看您生成的项目，请打开您选择的浏览器并访问 URL 栏中的 localhost:8080。 您将看到一个带有 Vue 徽标和您在前面步骤中选择的技术的欢迎屏幕。

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

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

第 3 步 - 创建标题组件

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

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

ls

您将收到以下输出： 

OutputREADME.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。 除了这些文件之外，还有许多目录。 本教程将在您了解这些内容时进行介绍。

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

touch src/components/AppHeader.vue

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

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

在此文件中，使用 <template> 内的 <header> 标记创建标题。 在 <header> 内部，添加 Vue.js 徽标和内容为 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>
  </header>
</template>

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

保存文件。

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

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

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 并在 <router-view /> 之前添加了 <app-header />。 这会在 HTML 中呈现组件。

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

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

现在标题已正确导入应用程序，在文本编辑器中返回 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 

<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 元素中添加以下突出显示的内容：

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，您可以这样做。 这称为 嵌套 。 在这种情况下，header 中的 p 与传统 CSS 中选择 header p 相同。

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

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

第 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 

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

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

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

要创建计算属性，您首先需要从 vue 库中解构 computed 函数。 您将将此计算函数及其值存储到 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> 使用和渲染而创建的计算属性的访问权限。 在 setup() 函数中返回具有 year 属性和值的对象：

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

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

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

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

<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 主题页面 。

取自“https://cainiaojiaocheng.com/index.php?title=如何使用VueCLI生成Vue.js单页应用程序&oldid=32130”
Powered by MediaWiki