Angular 開發環境搭建
1 安裝node.js 可以直接去官網https://nodejs.org/en/ 下載;
目的:使用npm 管理項目依賴的軟件包;
在cmd 中敲入 npm –version 查看版本號看是否安裝成功
2 由於 npm 會自動訪問海外的服務器,由於網絡的原因,可以使用cnpm yarn 作為替代的包管理工具;
cnpm 是淘寶發布的一款工具,會自動把 npm 上面的所有包定時同步到國內的服務器上來,cnpm 本身也是一款 NodeJS 模塊。
安裝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等