Angular 開發環境搭建

Angular 開發環境搭建

1 安裝node.js 能夠直接去官網https://nodejs.org/en/ 下載；

目的：使用npm 管理項目依賴的軟件包；

在cmd 中敲入 npm –version 查看版本號看是否安裝成功

 

2 因爲 npm 會自動訪問海外的服務器，因爲網絡的緣由，可使用cnpm yarn 做爲替代的包管理工具；

cnpm 是淘寶發佈的一款工具，會自動把 npm 上面的全部包定時同步到國內的服務器上來，cnpm 自己也是一款 NodeJS 模塊。

http://npm.taobao.org

安裝npm install -g cnpm --registry=https://registry.npm.taobao.org

好比：安裝angular/cli 這個是angular團隊構建的一個腳手架工具，讓咱們快速構建一個應用，不用理會繁瑣的配置；

把 @angular/cli 安裝到全局空間

npm i –g @angular/cli 或者npm i –g @angular/cli@1.1.0 指定版本號

若是發現過程比較慢，或者有錯誤，就可使用cnpm i --g @angular/cli

安裝好以後能夠 ng --version 看看版本

安裝好之後就可使用ng系列命令了好比 ng serve, ng g c XXX等

 

注意 : 若是安裝過程當中出現了錯誤，最好不要直接從新安裝，先清除一下緩存：

npm uninstall –g @angular/cli

npm cache clean --force

npm install -g @angular/cli

 

3 IDE 的配置

本人使用的Visual Studio Code 去官網直接下https://code.visualstudio.com

插件安裝：

Angular 5 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout （各類API提示，告別裸奔時代）

Debugger for Chrome （使vs code 能夠在chrome中debug Angular應用）

Eclipse Keymap 使用eclipse的快捷鍵，適用於之前使用eclipse的同窗

Chrome 安裝Augury 插件

插件惟一標識：elgalmkoelokbchhkhacckoklkejnhcd

網址：https://chrome-extension-downloader.com

json-server:用於快速搭建REST API的利器，或者rest client插件

安裝： npm i –g json-server

使用：json-server ./mock/data.json

另外還可使用一些接口測試工具：好比 postman restclient等