angular2-cli 環境搭建

開發工具:windows ,Vscode, npm, css

前提:安裝nodejshtml

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

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

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

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

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

其中node-sass 的包有可能會下載失敗由於國內的網絡緣由,能夠在npm config 中的proxy 設置代理, 或者將registry 設置爲淘寶地址,安裝完成大概就是下圖這樣一個樣子。會有不少不少包sass

 

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

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

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

相關文章
相關標籤/搜索