本文介紹的是為Angular4.0準(zhǔn)備環(huán)境和學(xué)會(huì)使用Angular cli來(lái)創(chuàng)建項(xiàng)目的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看詳細(xì)的介紹：

1.環(huán)境準(zhǔn)備：

1）在開(kāi)始工作之前我們必須設(shè)置好開(kāi)發(fā)環(huán)境, 如果你的機(jī)器上還沒(méi)有安裝Node.js和npm，請(qǐng)安裝他們
（這里特別推薦使用淘寶的鏡像cnpm，記得以后把npm的指令改為cnpm就可以了）

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后我們可以通過(guò)node -v和cnpm -v來(lái)分別查看node和cnpm安裝的版本和結(jié)果

node -v
cnpm -v

2）安裝全局Angular cli

cnpm install -g @angular/cli

2.創(chuàng)建新的項(xiàng)目

打開(kāi)終端窗口（這里我使用的是webstorm的Terminal，也可以使用計(jì)算機(jī)自帶的powershell）

ng new my-app

項(xiàng)目會(huì)很快創(chuàng)建完成，接下來(lái)你會(huì)看到

Installing packages for tooling via npm

這里如果你選這了淘寶的cnmp鏡像，應(yīng)該最好在安裝完全局Angular cli后設(shè)置一下，保證正常下載工具

ng set global packageManage = cnpm

然后我們的項(xiàng)目就創(chuàng)建完成了

我們會(huì)發(fā)現(xiàn)在文檔中有很多文件，這里參考Angular官方文檔 ，以便認(rèn)識(shí)這些文件的作用。

3.在項(xiàng)目中引入bootstrap和jQuery

這里我使用webstorm的Terminal，直接在終端操作

cnpm install bootstrap --save 
cnpm install jquery --save

我們?cè)陧?xiàng)目中就添加了bootstrap和jQuery，我們可以在node_modules文件夾中找到他們（這個(gè)文件夾放的是第三方庫(kù)）；

然后我們需要操作.angular-cli.json文件，把bootstrap和jQuery添加進(jìn)去:

這里需要注意的是：因?yàn)閍ngular用的是微軟開(kāi)發(fā)的typescript語(yǔ)言，我們需要在終端做下面的操作，以便讓typescript認(rèn)識(shí)bootstrap和jQuery一些字符（比如jQuery的$）：

cnpm install @types/bootstrap --save-dev
cnpm install @types/jquery --save-dev

這樣我們就在項(xiàng)目中正常使用bootstrap和jQuery了

4）為項(xiàng)目添加組件

ng g component navbar

5）項(xiàng)目的啟動(dòng)

啟動(dòng)項(xiàng)目我們可以直接通過(guò)：

ng serve

或者是

npm start

這兩個(gè)的默認(rèn)端口都是4200：http://localhost:4200

這里你也可以修改默認(rèn)的端口:

ng serve -p 3000

6)最后項(xiàng)目的打包

用angular cli創(chuàng)建的項(xiàng)目會(huì)有很多文件，我們就需要打包后再發(fā)行：

ng build

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論