作者选择了 开源精神疾病以作为 写给捐赠计划的一部分获得捐赠。
介绍
[Vue.js] (https://vuejs.org/)是一个受欢迎的JavaScript创建用户界面的框架. 2014年由埃文创建 你(形式上为Google),Vue.js经常被描述为"反应"(https://reactjs.org/)和"Angular"(https://angular.io/)的组合,借出由[道 (https://andsky.com/tech/tutorials/how-to-customize-react-components-with-props)驱动的React和Angular的诱发力的发展. 这使得Vue成为一个可供初学者取取的无障碍框架,特别是因为它侧重于传统的HTML和CSS,而不是像Angular那样像React或依赖TypeScript(一个超级集JavaScript)这样的CSS-in-JS框架.
在启动新项目时,最好熟悉该技术的工具和功能。Vue.js开发的一个重要工具是它的命令行界面(CLI),被称为 Vue CLI 3.Vue CLI提供了一些有用的功能,以增强Vue开发体验,但主要的功能是通过创建视图命令生成和预配置新的 单页应用程序的能力。
在本教程结束时,您将有一个在本地 Node服务器上运行的 Vue.js 应用程序。本地服务器使用通过 Webpack重新加载的热模块,以提供即时反馈,在浏览器中进行渲染。沿途,您将创建 `.vue’单个文件组件(SFC),如头部和脚部。
前提条件
要遵循本教程,您将需要以下内容:
- 节点.js版本`10.6.0'或更多安装在您的计算机上。 要在 macOS 或 Ubuntu 18.04 上安装,请遵循 [如何在 macOS (https://andsky.com/tech/tutorials/how-to-install-node-js-and-create-a-local-development-environment-on-macos) 上安装节点并创建本地开发环境 或使用 [如何在 Ubuntu 18.04 (https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04 上安装节点.js 的 PPA** 部分的 ** 步骤(https://andsky.com/tech/tutorials/how-to-install-node-js-on-ubuntu-18-04)
- 联合国 您还需要JavaScript, HTML, CSS 的基本知识, 您可以在 [How To Build a website With HTML series] (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html), [How To Build a website With CSS series] (https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css), 以及 [How To Code in JavaScript (https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript) 中找到这些知识. .
步骤 1 — 下载 Vue CLI 3
要下载 Vue CLI 3, 您需要通过 [npm] (https://www.npmjs.com/) 或 [Yarn] (https://yarnpkg.com/] 运行命令, 以您喜欢的为准 。 npm或节点包管理器是下载和管理他人代码的一种方法,在您的项目中用作依赖. 另一方面,Yarn在引擎盖下执行国家预防机制的命令,但提供其他功能,如缓存。 这取决于个人的偏好 要使用哪一个。 然而,需要注意的是,不建议混合命令. 在项目期间最好与其中之一保持一致.
下面的命令将从注册表中下载必要的Vue CLI文件,在这种情况下是 npm(Node Package Manager)服务:
1npm i -g @vue/cli
注意: 在某些系统中,在全球范围内安装 npm 包可能会导致权限错误,这会中断安装。 由于避免使用sudo与npm install是安全最佳做法,您可以通过更改 npm 的默认目录来解决此问题。
如果你没有在全球范围内安装它,它只会在您安装的目录中工作. 在命令选项中,i意味着安装,-g是在您的计算机上安装全球代码的旗帜。
若要验证 Vue CLI 3 是否正确安装,请执行以下操作:
1vue --version
您的版本号可能不同,但如果您收到版本号的响应,则已正确安装 Vue CLI 3:
1[secondary_label Output]
2@vue/cli 4.5.6
若要更新 Vue CLI 3,请运行本节中的以前的命令,并安装最新版本。
在此时,您已经成功下载了全球 npm 以及 Vue CLI 工具,您将在下一节中使用它来创建生成的 Vue.js 项目。
步骤2 - 生成单页应用程序
当您开发 Vue.js 应用程序时,您可能会发现手动配置一个项目并不是您时间最有成效的用途,因为从头配置一个新的 Vue.js 项目需要几个小时。 这是Vue CLI的真正力量: 它为您提供了一个基于您的规格的预生成模板. 由于这个原因,它已经配置好,可以立刻开始开发自己的网站或应用程序. Vue CLI 3 将会通过命令行提示来向您询问一些关于您的项目的问题,下载所需的文件,并预先为您配置文件,这样您就可以在完成后立即工作.
若要生成单页应用程序,请导航到您想要的 Vue 项目的目录,然后运行以下操作:
1vue create vue-starter-project
命令的突出部分是项目的根目录名称. 这将是包含所有 Vue.js 项目文件的文件夹的名称. 这可以是您想要的任何东西,但在本教程的情况下,您将使用vue-starter-project。
一旦你输出该命令,继续按Enter,然后你将收到以下提示:
1Vue CLI v4.5.6
2? Please pick a preset:
3 Default ([Vue 2] babel, eslint)
4 Default (Vue 3 Preview) ([Vue 3] babel, eslint)
5❯ Manually select features
如果您不想配置您的项目并选择默认值,您可以使用Vue 2或Vue 3进行此操作,但对于本教程的目的,建议手动选择您的功能。
选择手动选择功能与ENTER。 您将立即收到一系列不同的选项,包括:选择视图版本,TypeScript,路由器和Vuex。 请注意,其中一些项目已经被选中(泡沫已填充)。
1...
2 ◉ Choose Vue version
3 ◉ Babel
4 ◉ TypeScript
5 ◯ Progressive Web App (PWA) Support
6 ◉ Router
7 ◉ Vuex
8 ◉ CSS Pre-processors
9 ◉ Linter / Formatter
10❯◯ Unit Testing
11 ◯ E2E Testing
一旦选择了选项,请按下ENTER键。CLI将向您提出有关您为您的项目选择的每个功能的进一步问题,顺序顺序。第一个问题将询问您想要使用哪个版本的Vue:2.x或3.x。
1...
2? Choose a version of Vue.js that you want to start the project with
3 2.x
4❯ 3.x (Preview)
下一个问题是关于TypeScript集成. 如果你不熟悉TypeScript,那就没问题了. 这个选项是故意选择的,以说明Vue CLI 3如何下载你定义为独特项目所需的内容。
当遇到以下时,输入N:
1...
2Use class-style component syntax? (y/N) N
在下面的提示中,输入Y:
1...
2? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n) Y
接下来,Vue CLI 会询问历史模式。 History mode 将使每个路径都有自己的 URL. 这意味着您在应用程序的 URL 中不会有 /# / (哈希) 如果您使用历史模式,则需要一个 Node 服务器来运行您的项目。
输入Y以回答是历史模式:
1...
2? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
下一个问题涉及CSS预处理器,例如Sass或LESS。 一个_CSS预处理器_是CSS,具有巢和变量等新增特性. 浏览器无法读取,所以在工程建成后,节点会将您所有的[SCSS (https://sass-lang.com/documentation/syntax# scss)或LESS代码编译为传统的CSS. 由于您正在使用节点来构建您的项目,所以建议选择 Sass/ SCSS (带有节点- sass) 作为您的预处理器 。 稍后,您将在您的 .vue 组件中加入 lang 属性, 使每个组件的SCSS能够:
1...
2? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
3 Sass/SCSS (with dart-sass)
4❯ Sass/SCSS (with node-sass)
5 Less
6 Stylus
之后,您将收到有关 linter 风格的一些问题。 linter 是一个在开发应用程序时评估您的代码的程序。 此 linter 可以在开发过程中执行一系列语法规则。 除此之外,您的 集成开发环境 (IDE) 还可以读取此配置文件并格式化您的代码。 这将使您的代码保持一致,无论谁在您的项目上工作,以及开发人员使用的操作系统或 IDE。
对于本教程,选择ESLint + 标准配置:
1...
2? Pick a linter / formatter config:
3 ESLint with error prevention only
4 ESLint + Airbnb config
5❯ ESLint + Standard config
6 ESLint + Prettier
7 TSLint (deprecated)
这会选择一组规则,以便执行 ESLint。这些配置包括使用追溯符号、行末端的半列或JavaScript中的const和var等选项。
下一个选项是选择当您希望 ESLint 格式化您的代码。这可以是在保存时,或者当您将代码委托给像 GitHub, GitLab或 BitBucket这样的服务时。
1...
2? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
3❯◉ Lint on save
4 ◯ Lint and fix on commit
一旦您选择了您的 lint 功能,Vue CLI 将询问您如何存储这些配置,无论是在专用文件中还是在package.json中。 由于几个原因,将配置存储在自己的文件中被认为是常规的。
1...
2? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
3❯ In dedicated config files
4 In package.json
一旦完成,CLI 工具将询问您是否希望将此选择保存为未来项目的预设,如果您正在为您的雇主生成项目,并且您希望一切都保持一致,这是有用的。
继续保存此配置作为预设;Vue CLI将要求您更名它。
1...
2? Save this as a preset for future projects? Yes
3? Save preset as: DigitalOcean Vue Tutorial Series
现在您可以为未来的项目使用这些相同的设置。
此时,您将在您的终端中有相应的内容,概括您的所有选项:
1? Please pick a preset: Manually select features
2? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Vuex, CSS Pre-processors, Linter
3? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
4? Use class-style component syntax? No
5? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
6? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
7? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with node-sass)
8? Pick a linter / formatter config: Standard
9? Pick additional lint features: Lint on save
10? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
11? Save this as a preset for future projects? (y/N)
点击ENTER,Vue CLI将开始创建您的应用程序。
完成后,在项目名称中(vue-starter-project)键入cd(更改目录):
1cd vue-starter-project
接下来,请使用npm run server启动应用程序,以便在本地主机上的一个端口运行您的项目,通常是:8080。
1npm run serve
您不需要下载依赖性,因为CLI已经为您做了。 要查看您生成的项目,请打开您所选择的浏览器,并访问URL栏中的localhost:8080。
您可以让这个服务器在整个教程中运行,以监控您的更改。
在本节中,您选择了一些特定于您正在创建的项目的选项。Vue CLI下载了所有所需的代码,并为您预配置了代码。
步骤 3 — 创建一个标题组件
现在你有一个单页应用程序在一个节点服务器上运行,通过创建一个标准的标题和脚印来对其进行一些更改.这些AppHeader.vue和AppFooter.vue组件将被导入,以便它们在每个路线上存在。
在新的终端窗口中,导航到您的vue-starter-project文件夹的根,并用以下命令列出文件:
1ls
您将获得以下输出:
1[secondary_label Output]
2README.md babel.config.js node_modules package-lock.json package.json public src tsconfig.json
也可以通过在您选择的编辑器中打开您的项目来查看您项目的内容,例如[Visual Studio Code (https://code.visualstudio.com/). 在这两种情况下,您都可以访问一些不同的文件和目录。 根目录中这些配置文件的创建,是因为在这个项目的Intial生成过程中进行了选择. 选项 在专用配置文件中 告诉 Vue CLI 为您使用的每项服务创建 config.js 文件, 如 Babel、 TypeScript 和 ESLint 。 除了这些文件,还有多部目录. 这个教程会经过这些 当你得到它们.
首先,在组件目录中创建一个.vue文件,并将其命名为AppHeader.vue。您可以在组件目录中右键单击,并在IDEs中创建一个新的文件,例如VS Code。
1touch src/components/AppHeader.vue
在此步骤中,您正在创建一个单个文件组件,该组件将包含这个代码需要的所有HTML、JavaScript和SCSS。每个.vue 组件包含三个基本问题或部分:<template>、<script>和<style>。
在文本编辑器中打开新文件。
在此文件中,使用<header>标签在<template>中创建一个标题,在这个<header>中添加Vue.js标志和一个<p>元素,其中包含内容My Vue.js Application:
1[label vue-starter-project/src/components/AppHeader.vue]
2<template>
3 <header>
4 <img alt="Vue logo" src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/../assets/logo.png" height="50">
5 <p>My Vue.js Application</p>
6 </header>
7</template>
如果您关闭或取消服务器流程,您将无法在浏览器中查看您的应用程序。
保存檔案
在此时,当您打开浏览器时,您将不会看到HTML渲染,这是因为您需要将新创建的AppHeader.vue组件导入到已经安装的组件中。
在文本编辑器中打开App.vue文件,然后删除div和nav的ID,并添加以下突出代码:
1[label vue-starter-project/src/App.vue]
2<template>
3 <app-header />
4 <router-view/>
5</template>
6
7<script>
8import AppHeader from '@/components/AppHeader.vue'
9
10export default {
11 components: {
12 AppHeader
13 }
14}
15</script>
当您使用 ES6 导入时,您基本上正在创建一个变量,以便在代码中稍后引用。在这种情况下,您正在将AppHeader.vue的代码存储到名为AppHeader的变量中。
导入后,您在模板中删除了# nav并在<router-view />之前添加了<app-header />。
完成此步骤后,保存未保存的任何文件,并重新打开浏览器到「localhost:8080」。 由于热模块重新加载,您现在将在页面顶部找到新创建的标题:
您现在已经创建了一个单个文件的Vue组件,使用导入将其带入一个安装的组件,并通过热模块重新加载(HMR)监控了变化。前进,您将通过使用儿童组件来扩展组件的功能性。
现在头部已经正确导入到应用程序中,请在文本编辑器中返回AppHeader.vue。
1[label vue-starter-project/src/components/AppHeader.vue]
2<template>
3 <header>
4 <img alt="Vue logo" src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/../assets/logo.png" height="50">
5 <p>My Vue.js Application</p>
6 <nav>
7 <ul>
8 <li><router-link to="/">Home</router-link></li>
9 <li><router-link to="/about">About</router-link></li>
10 </ul>
11 </nav>
12 </header>
13</template>
现在,设计这个,使它看起来更像一个传统的导航栏. 在文件末尾创建一个<style>标签。
1[label vue-starter-project/src/components/AppHeader.vue]
2<template>
3 <header>
4 <img alt="Vue logo" src="https://cdn.jsdelivr.net/gh/andsky/tutorials-images/../assets/logo.png" height="50">
5 <p>My Vue.js Application</p>
6 <nav>
7 <ul>
8 <li><router-link to="/">Home</router-link></li>
9 <li><router-link to="/about">About</router-link></li>
10 </ul>
11 </nav>
12 </header>
13</template>
14
15<style lang="scss">
16</style>
在初始设置中,您选择了Sass/SCSS(与节点-sass)选项,这就是为什么您在您的风格标签中添加了`lang="scss``属性。
此lang属性将为您提供在单个文件组件中写 SCSS 的能力,并在风格元素中添加以下突出内容:
1[label vue-starter-project/src/components/AppHeader.vue]
2...
3<style lang="scss">
4 header {
5 display: flex;
6 border-bottom: 1px solid #ccc;
7 padding: .5rem 1rem;
8
9 p {
10 margin-left: 1rem;
11 }
12 }
13
14 nav {
15 margin-left: auto;
16
17 ul {
18 list-style: none;
19 }
20
21 ul li {
22 display: inline-flex;
23 margin-left: 1rem;
24 }
25 }
26</style>
SCSS创建了一个水平导航条,上面有显示:内入-弹性等声明(使用Flexbox),并用边-左自动空出每个项目。 为了将标题与其余内容区分开来,采用了铺平:5rem 1rem和下边:1px固件# cc。 你可能会注意到p'样式在头'SCSS区块内。 在传统的CSS中,这是不允许的, 但感谢SCSS,你可以做到这一点。 这被称为_nesting_. 在这种情况下,头'中的头'与传统CSS中选择`头'相同.
保存您的文件,并在浏览器中导航到localhost:8080,以找到新的风格:
您现在已经创建并定制了头部组件,接下来,您将创建脚部组件。
步骤4 — 创建脚部组件
现在你有一个标题,你将用一个脚印完成你的示例应用程序. 在同一个组件目录中,创建一个名为AppFooter.vue的新文件。创建这个组件的过程与创建AppHeader.vue相同。
1touch src/components/AppFooter.vue
如前所述,将此导入到您的App.vue文件中,打开App.vue并添加以下突出代码:
1[label vue-starter-project/src/App.vue]
2<template>
3 <app-header />
4 <router-view/>
5 <app-footer />
6</template>
7
8<script>
9import AppHeader from '@/components/AppHeader.vue'
10import AppFooter from '@/components/AppFooter.vue'
11
12export default {
13 components: {
14 AppHeader,
15 AppFooter
16 }
17}
18</script>
19...
这一次,您在路由器视图标签后导入组件。
保存该文件,然后打开AppFooter.vue。在您的AppFooter.vue文件中,使用<footer>HTML标签与段落:
1[label vue-starter-project/src/components/AppFooter.vue]
2<template>
3 <footer>
4 <p>Copyright © "current year" </p>
5 </footer>
6</template>
现在你有一个基本的脚本。 继续扩展到包含当前年份的程序。 这将是动态的,取决于年份是什么。 要做到这一点,你将创建一个 computed 属性。
在Vue 3中,您需要将属性包装到setup()函数中,然后返回这些值,基本上,您正在告诉Vue构建此组件并为这些反应性计算属性提供模板。
要创建计算属性,您首先需要从视图库中解构计算函数. 您将将此计算函数及其值存储在一个const中。
1const year = computed(() => new Date().getFullYear())
要将设置函数添加到您的文件中,请在AppFooter.vue的末尾添加以下脚本:
1[label vue-starter-project/src/components/AppFooter.vue]
2...
3<script>
4import { computed } from 'vue'
5
6export default {
7 setup () {
8 const year = computed(() => new Date().getFullYear())
9 }
10}
11</script>
之后,您需要提供访问您创建的计算属性,以便使用和渲染<template>。
1[label /vue-starter-project/src/components/AppFooter.vue]
2...
3setup () {
4 const year = computed(() => new Date().getFullYear())
5 return { year }
6}
7...
若要在「<模板>>」中使用此值,请使用双弯曲的对接,这有时被称为胡子语法:
1[label /vue-starter-project/src/components/AppFooter.vue]
2<template>
3 <footer>
4 <p>Copyright © {{ year }}</p>
5 </footer>
6</template>
保存文件. 你现在将有当前的年份在你的脚下:
结论
在本教程中,您下载了Vue CLI,并使用AppHeader.vue和AppFooter.vue创建了自己的单个文件组件,您成功地生成了一种Vue.js单页应用程序(SPA),从初始设置中获得了选定的功能,并了解了这些组件如何结合在一起。
Vue.js 是一个不断增长的生态系统,您可以使用多种工具,这些工具可以帮助您快速启动并通过预设存储选项来节省时间,这只是 Vue.js 提供的开始,但 CLI 肯定是您在 Vue.js 旅程中使用的最重要的工具之一。
有关 Vue.js和 Vue CLI 3的更多信息,建议您阅读他们的文档。 CLI 工具特别具有许多本教程未涵盖的附加功能。