angular2-cli 環境搭建


開發工具:windows ,Vscode, npm, 

前提:安裝nodejs

nodejs 模塊全局安裝路徑配置:http://www.cnblogs.com/rancho-blog/p/6567929.html(我的另外一遍)

nodejs下載地址:https://nodejs.org/en/

vscode下載地址:https://code.visualstudio.com/

1.全局安裝angular-cli:    npm install angular-cli -g

npm 設置淘寶鏡像 : npm config set registry "https://registry.npm.taobao.org/"

其中node-sass 的包有可能會下載失敗因為國內的網絡原因,可以在npm config 中的proxy 設置代理, 或者將registry 設置為淘寶地址,安裝完成大概就是下圖這樣一個樣子。會有很多很多包

 

2.查看是否安裝成功: ng -v

3.使用cli 新建項目工程 ng new project-name

4.生成項目結構圖:

5.對項目結構主要內容解釋如下:(本文對於單元以及集成測試測試沒有說明, 若想了解請到http://www.protractortest.org/#/ 查看專門為angular設計的集成測試)

e2e ------------------------------用於測試(本文對於測試不會涉及)

node_modules------------------存放依賴包的地方

src--------------------------------存放源代碼

    app----------------------------根模塊

        app.component.css------樣式文件

   app.component.html---模板

   app.component.spec.ts-測試

   app.component.ts-------組件

   app.module.ts------------模塊

    environments----------------環境

   environment.prod.ts----生產環境

   environment.ts----------非生產環境

    index.html-------------------宿主頁面

    mian.ts-----------------------程序引導

    tsconfig.json-----------------編譯配置

  angular-cli.json--------------angular-cli配置

    package.json----------------依賴包以及npm的命令

6.運行程序 ng serve  在瀏覽器上輸入localhost:4200

7 在ng serve 后面加上 --prod -aot  重新運行

(ng serve --prod --aot)     與之間的對比  (ng serve) size會小一些

 


免責聲明!

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



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