在学习Angular的同时与Vue.js进行比较 -环境搭建篇- 第一部分
最近我在使用Vue进行开发和运营项目，但是最近我遇到了使用Angular的情况，所以我想整理一下并与大家共享一些相关信息。
我想要降低学习Angular的成本。
通过与我在实际工作中使用的Vue.js进行比较，我将尽力以简单明了的方式解释Angular被认为学习成本高的原因，并描述其结构。
暫時決定先動手動手，嘗試用Vue.js和Angular進行模擬製作，因為創造的過程是最高效的記憶方法之一。
请注意，这个课程需要具备Vue.js或SPA开发经验的学员。
命令行工具
在Vue.js中，有一个名为Vue CLI的命令行工具
在Angular中，有一个名为Angular CLI的命令行工具。
在命令行工具中，有一个好处是可以省去一些常用的配置，比如创建目录和设置webpack等，这在SPA开发中经常使用。
首先，无论如何，我们先安装命令行工具。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
npm install -g @angular/cli
# OR
yarn global add @angular/cli
使用Vue CLI创建项目。
vue create [任意の名前（フォルダ名）]
? Please pick a preset:
express (router, vuex, dart-sass, babel, eslint)
default (babel, eslint)
❯ Manually select features
express的配置包括了vuex、router、sass、babel和lint。
default的配置是最小单位的，包括了babel和lint。
Manually select feature是由开发者自己决定安装所需环境。
本次我们将使用手动选择功能来构建环境。
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
❯◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
-
- 新しいESを利用したいのでBabel
-
- ページ遷移するページを作成するのでRouter
-
- 共通データを保持するためのVuex
- jsのミスタイプを表示してくれるLinter
请用空格键选择上述的四个项目，然后按下回车键确定。
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n)
不使用历史模式时，URL带有标签会感觉非常不舒服，因此选择启用历史模式，并输入Y后按下回车。
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
下一步，我会问你要使用哪种CSS预处理器，我通常使用Sass/SCSS（dart-sass）。
有Dart Sass和Node Sass等选项，但我不太了解它们之间的区别，而且我使用Dart Sass时几乎没有什么问题需要担心，所以不会去考虑这个。
虽然可以选择Less或Stylus，但现在什么都不考虑（脑死）。
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
只要能读懂错误的描述，连Airbnb和标准规范的设置都可以不必考虑，选择最顶部的选项。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
◯ Lint and fix on commit
我想选择上选项，因为我想要在文件保存时检查错误。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files
In package.json
由于在package.json中写入所有内容会变得很难阅读，因此我们选择在各自的配置文件中进行描述。
? Save this as a preset for future projects?(y/N)
我不太明白问题的意图，但是选择No后，router.js文件没有生成。所以这次我选择了Yes并按下Enter键。
总之，Vue.js的开发环境已经完成了。
使用Angular CLI创建项目。
ng new --minimal=true --skip-Tests=true [任意の名前(フォルダ名)]
# スタンダードなプロジェクト作成 ng new [任意の名前(フォルダ名)]
由于这次测试说明太麻烦了，我想跳过测试文件。请设置不创建测试工具和测试文件。
? Would you like to add Angular routing? (y/N)
想要制作一个类似Vue.js的页面跳转网站，所以选择y。
? Which stylesheet format would you like to use? (Use arrow keys)
CSS
❯ SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ http://stylus-lang.com ]
因为SCSS易于使用，所以选择使用SCSS。
这就是结束了
Angular CLI生成
Angular CLI和Vue CLI之间的主要区别在于
相较于只能使用Vue CLI进行环境搭建的能力，
我认为Angular CLI提供了更丰富的命令，可以通过命令来进行开发所需的配置等等。
（这是我个人的观点）
我想介绍一下在这些中最常被使用的ng generate功能。
ng generate命令可以支持生成开发所需的文件。
比如说，如果在Vue中新建了一个组件，就需要复制下面这个Vue文件，并对文件名和name进行更改。
虽然不是太麻烦，但却相当繁琐。
<template>
<div>
<p>Template</p>
</div>
</template>
<script>
export default {
name: 'Template'
}
</script>
<style scoped lang="scss">
</style>
Angular CLI可以使用ng generate命令来生成文件的模板，其中包括文件的生成等功能。
ng generate [生成したい種類] [ファイルパス/ファイル名]
试试生成一个名为sample.component.ts的Angular组件文件。
ng generate component sample
在不指定文件路径的情况下，执行后可以确认在src/app目录下生成了文件。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-sample',
templateUrl: './sample.component.html',
styleUrls: ['./sample.component.scss']
})
export class SampleComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
查看内容后，发现有一个包含了最小必要代码的模板可供使用。
这次使用了ng generate component，但除此之外还可以生成其他各种类型的文件，所以如果事先阅读下面的URL，可能会对开发有所帮助。
Angular CLI – 生成
总结
与Vue CLI相比，Angular CLI让我感觉需要进行较少的配置。
由于Vue.js可以安装各种不同的包，所以似乎可以进行更复杂的配置。
下一步，我打算比较目录和大致结构。
在学习Angular的过程中与Vue.js进行比较 – 配置篇 – 第二部分。
