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

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

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

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

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

node -v
cnpm -v

2）安裝全局Angular cli

cnpm install -g @angular/cli

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

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

ng new my-app

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

Installing packages for tooling via npm

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

ng set global packageManage = cnpm

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

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

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

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

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

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

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

這里需要注意的是：因?yàn)閍ngular用的是微軟開發(fā)的typescript語言，我們需要在終端做下面的操作，以便讓typescript認(rèn)識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)目我們可以直接通過：

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)目會有很多文件，我們就需要打包后再發(fā)行：

ng build

總結(jié)

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

最新評論