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會小一些