本篇中，我們將使用angular-cli來構建我們的第一個angular項目。
一、安裝Node.js及npm包管理工具
下載 Node.js：推薦下載 8.12.0 版本，較爲穩定，下載後安裝即可。
二、安裝vscode
安裝時勾選下面選項
vscode 插件推薦
Chinese (Simplified) Language Pack for Visual Studio Code ：適用於 VS Code 的中文（簡體）語言包
Angular 7 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout：Angular 代碼片段
VSCode simpler Icons with Angular：Angular 文件圖標樣式
TSLint ：TypeScript 代碼規範工具
Beautiful：代碼格式化插件
三、安裝相關環境
打開vscode後，使用快捷鍵 Ctrl + ` 或 查看 -> 終端，打開終端。
安裝 angular-cli 語句：
npm install -g @angular/cli科學上網：使用淘寶鏡像解決部分安裝包無法下載問題。（可能會造成package的安裝問題）
npm install -g cnpm --registry=https://registry.npm.taobao.org四、搭建項目
在電腦中創建angular文件夾來存放你的項目，而後創建一個文件夾，右鍵點擊文件夾並選擇 open with vscode。終端路徑會自動打開至當前文件夾。
使用命令創鍵一個新的項目。
ng new my-app 因爲網絡問題，最好新建項目是加入 --skipInstall 來跳過安裝步驟，再使用 npm install 進行安裝。
ng new my-app --skipInstall
cd my-app
npm install
注意：目測angular項目無法使用cnpm安裝，所以儘量不要安裝cnpm。但是如果不使用cnpm，可以會出現由於網絡問題無法安裝node-sass。這裏提供一個解決辦法：只針對node-sass使用淘寶鏡像下載
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/五、運行
在終端中鍵入下面的命令運行項目，項目地址：http://localhost:4200/
ng serve --open
這樣我們的項目就可以運行了。
接下來在 /src/app/app.component.ts 修改爲如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
title = 'my-app';
hello = 'HelloWorld!';
}
在/src/app/app.component.ts文件的 <h1> Welcome to {{ title }}! </h1> 後面添加
<h1>{{ hello }}</h1>
我們的第一個Angular項目創建了成功。
總結
現在我們的電腦已經具備了創建angular項目的全部環境，那麼下一篇我們將根據angular提供的官方demo繼續學習angular。