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 开发体验，但主要功能是它能够使用命令生成和预配置新的单页应用程序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 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 服务器来运行您的项目。这不是问题，因为 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，这都将使您的代码保持一致。
对于本教程，选择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并在 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：
<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在文本编辑器中打开文件，然后删除divIDnav并添加以下突出显示的代码：
<template>
<app-header />
<router-view/>
</template>
<script>
import AppHeader from '@/components/AppHeader.vue'
export default {
components: {
AppHeader
}
}
</script>
AppHeader.vue到一个名为AppHeader. 您需要先通过该components属性进行注册，然后才能使用它。
导入后，您删除#nav了模板中的 并<app-header />在<router-view />. 这会在 HTML 中呈现组件。
完成此步骤后，保存所有未保存的文件并打开浏览器返回localhost:8080. 由于热模块重新加载，您现在将在页面顶部找到新创建的标题：
您现在已经创建了一个单文件 Vue 组件，用于import将其放入已安装的组件中，并通过热模块重载 (HMR) 监控更改。展望未来，您将通过使用子组件来扩展组件的功能。您还将在每个组件的基础上使用 SCSS（您之前选择的预处理器）和lang属性。
现在标题已正确导入应用程序，返回到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>
display: inline-flex（使用Flexbox）并用margin-left auto. 为了将标题与其余内容分开，应用了一些填充padding: .5rem 1rem以及使用border-bottom: 1px solid #ccc. 您可能会注意到p样式位于headerSCSS 块内。在传统的 CSS 中，这是不允许的，但感谢 SCSS，您可以这样做。这称为嵌套。在这种情况下，p里面的选择与传统 CSSheader中的选择相同。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 © "current year" </p>
</footer>
</template>
在 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 © {{ year }}</p>
</footer>
</template>
结论
AppHeader.vue在本教程中，您下载了 Vue CLI 并使用和创建了自己的单文件组件AppFooter.vue。您成功地生成了一个 Vue.js 单页应用程序 (SPA)，其中包含初始设置中的选定功能，并了解了所有这些部分是如何组合在一起的。此外，您现在已经查看了大多数 SPA 的基本架构，并且可以使用这些知识进一步扩展该项目。
Vue.js 是一个不断发展的生态系统，您可以随意使用许多工具。这些工具可以通过将选项存储为预设来帮助您快速入门并节省时间。这只是 Vue.js 所提供的开始，但 CLI 可能是您将在 Vue.js 旅程中使用的最重要的工具之一。
有关Vue.js和Vue CLI 3的更多信息，建议阅读他们的文档。CLI 工具特别具有本教程未涵盖的许多附加功能。有关 Vue 的更多教程，请查看Vue 主题页面。
1344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
