介紹

? ? ? ? 眾所周知，在一般web框架開發(fā)中，腳手架一直是作為較為重要的一趴，各個(gè)框架也都有基于自己框架的腳手架版本，而Angular官方所提供腳手架（@angular-cli）則極為強(qiáng)大，可以說(shuō)真正的超過(guò)了一般的腳手架含義。

安裝

? ? ? ? cnpm i -g @angular/cli

? ? ? ? 國(guó)內(nèi)用戶可以選擇阿里的cnpm或者fb的yarn去下載，個(gè)人推薦用yarn下載依賴， 因?yàn)閥arn雖然下載的時(shí)間較久，但不得不說(shuō)，yarn下載下來(lái)的資源出問(wèn)題的概率很?。▂arn global add @angular/clis）。

初始化項(xiàng)目

? ? ? ? 常見的命令行操作

? ? ? ? ? ? 1. ng new <project-name> --routing --prefix=zkl?

? ? ? ? ? ? 新建一個(gè)angular項(xiàng)目，模版中新建了路由文件并且之后生成的組件都會(huì)以zkl為前綴

? ? ? ? ? ?2. ng g c/d/p/m/s/a <name>

? ? ? ? ? ? 新建一個(gè) Component/Directive/Pipe/Module/Service/Auth， name為自定義名稱，值得注意的是新建一個(gè)module的時(shí)候可以加上 --routing，則會(huì)生成對(duì)應(yīng)的路由文件

? ? ? ? ? ?3. ng serve --open --port 0000 --host 0.0.0.0 --config proxy.config.json

? ? ? ? ? ? 在新建項(xiàng)目之后ng serve為項(xiàng)目啟動(dòng)命令，--open會(huì)打開默認(rèn)瀏覽器，--port 指定端口，默認(rèn)端口為4200，--config 為指定一個(gè)proxy的配置文件，稍后有章節(jié)會(huì)詳細(xì)解釋，值得注意的是--host命令，默認(rèn)的ng serve 啟動(dòng)的項(xiàng)目只可以用localhost訪問(wèn)，同局域網(wǎng)的機(jī)器無(wú)法通過(guò)ip訪問(wèn)，加上--host 0.0.0.0 則可以正常訪問(wèn)

? ? ? ? ? ?4. ng config jsonPath value --global --help?

? ? ? ? ? ? 該命令是用來(lái)切換默認(rèn)的包管理器的，在ng6之前的版本中是用ng set ， 在ng7中用ng config，全量的命令名稱為：ng config?cli.packageManager cnpm||yarn --global

? ? ? ? ? ?5. ng build --prod --output-path xxx --base-href xxx

? ? ? ? ? ? 該命令是用來(lái)打包編譯的，--prod是angular自定義的一種生產(chǎn)模式打包，它包括了對(duì)代碼的壓縮混淆以及會(huì)檢測(cè)代碼的嚴(yán)謹(jǐn)性，碰到問(wèn)題直接拋出。--output-path則是改變輸出文件夾的名稱，默認(rèn)為dist， --base-href則是改變輸出文件夾內(nèi)index.html中base標(biāo)簽的href屬性，默認(rèn)為/，當(dāng)我們的應(yīng)用需要部署在某個(gè)二級(jí)目錄下時(shí)需要修改該參數(shù)

? ? ? ? ? 6.?node --max_old_space_size=8195 node_modules/@angular/cli/bin/ng build

? ? ? ? ? 該命令部署angular 腳手架范圍，他屬于node范圍，它的含義是編譯時(shí)將可用內(nèi)存擴(kuò)展到8G，這是為了防止打包是的內(nèi)存溢出。