Angular環(huán)境搭建和新建項(xiàng)目

CHENGKANG 發(fā)布于2019-08-22 13:58 / 926人閱讀

摘要：環(huán)境下的的安裝和配置安裝官網(wǎng)地址下載相應(yīng)的安裝包安轉(zhuǎn)檢查是否安裝如下圖由于新版的已經(jīng)集成了，所以之前也一并安裝好了。

Windows環(huán)境下的NodeJS+NPM的安裝和配置

1、安裝NodeJS
官網(wǎng)地址: http://nodejs.cn/download/
下載相應(yīng)的安裝包, 安轉(zhuǎn).
2、檢查npm是否安裝
如下圖:
由于新版的NodeJS已經(jīng)集成了npm，所以之前npm也一并安裝好了。可以使用cmd命令行中鍵入 npm -v查看npm版本號,進(jìn)行檢查是否安裝成功.
若沒有安裝npm
安裝淘寶鏡像 :npm install
npm install -g cnpm --registry=https://registry.npm.taobao.org

淘寶鏡像安裝更快方法：
將.npmrc 文件放在本電腦C:UsersAdministrator 路徑中去
.npmrc 文件內(nèi)容為：
registry=https://registry.npm.taobao.org/
ELECTRON_MIRROR=http://npm.taobao.org/mirrors...
SASS_BINARY_SITE=http://npm.taobao.org/mirrors...

安裝Angular CLI

$ npm install -g @angular/cli

新建Angular項(xiàng)目

D:angularTest>ng new myProj
ng new myProj --style=scss / --style=sass ,--less(樣式文件格式）
--routing（會在app文件中生成app-routing.module.ts配置文件）
即:ng new myProj --routing=true --style=less
用webstrom打開新建 myProj項(xiàng)目

再一次npm install
最后啟動項(xiàng)目npm start
瀏覽器運(yùn)行http://localhost:4200/即可完成

常用于新建的指令
ng generate class my-new-class // 新建 class
ng generate component my-new-component // 新建組件
ng generate directive my-new-directive // 新建指令
ng generate enum my-new-enum // 新建枚舉
ng generate module my-new-module // 新建模塊
ng generate pipe my-new-pipe // 新建管道
ng generate service my-new-service // 新建服務(wù)

可以簡寫成：

ng g cl my-new-class // 新建 class
ng g c my-new-component // 新建組件
ng g d my-new-directive // 新建指令
ng g e my-new-enum // 新建枚舉
ng g m my-new-module // 新建模塊
ng g p my-new-pipe // 新建管道
ng g s my-new-service // 新建服務(wù)