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 可以在chromedebug 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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM