怎么在Angular中使用Angular CLI？相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

成都創(chuàng)新互聯(lián)公司主打移動(dòng)網(wǎng)站、網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、主機(jī)域名、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實(shí)力的保障下，我們?yōu)榭蛻?hù)承諾穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再?zèng)Q定采用什么樣的設(shè)計(jì)。最后，要實(shí)現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計(jì)，我們還會(huì)規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

具體的命令是：

yarn global add @angular/cli

參數(shù) global 說(shuō)明是在全局安裝； add 說(shuō)明是在“添加”；最后是 CLI 的包名，沒(méi)有注明版本好的話(huà)，會(huì)讓 yarn 安裝最新版的 CLI。。這一語(yǔ)句與之前 NPM 的

npm install -g @angular/cli

是等價(jià)的。

之后我們運(yùn)行

ng version

如果能夠輸出 Angular CLI 的版本號(hào)，說(shuō)明安裝成功。注意，Angular CLI 的所有命令都是以 ng 開(kāi)始的。

Angular CLI 建立在 webpack 基礎(chǔ)之上，可以幫助我們生成 Angular 項(xiàng)目框架，生成 Angular 模塊、組件、指令等。如果手動(dòng)搭建這一開(kāi)發(fā)環(huán)境，需要了解 webpack 的各種細(xì)節(jié)、編寫(xiě)各種自動(dòng)化腳本等，要求較高的前端開(kāi)發(fā)技術(shù)。考慮到我們的基礎(chǔ)教程，使用 CLI 輔助開(kāi)發(fā)無(wú)疑是合適的。我們會(huì)在后面的章節(jié)中詳細(xì)介紹 Angular CLI 的使用，如果你對(duì) Angular CLI 感興趣，可以通過(guò)其官方網(wǎng)站 了解更多的細(xì)節(jié)。

剛剛安裝完成的 CLI 默認(rèn)使用 NPM 作為包管理工具。我們希望使用 yarn，只需運(yùn)行下面的命令：

ng set --global packageManager=yarn

反之，如果想換回 NPM，只需使用

ng set --global packageManager=npm

即可。

安裝好 Angular CLI，下面我們來(lái)創(chuàng)建第一個(gè)示例工程，了解 Angular CLI 的基本使用。

首先，使用

ng new demo

創(chuàng)建一個(gè)演示項(xiàng)目。 new 是創(chuàng)建一個(gè)全新項(xiàng)目，后面的 demo 是項(xiàng)目的名字。Angular CLI 會(huì)幫我們生成完整的項(xiàng)目框架——包括項(xiàng)目所需所有文件、文件結(jié)構(gòu)以及各種輔助文件等。之后，Angular CLI 會(huì)自動(dòng)運(yùn)行 yarn install ，這是在安裝項(xiàng)目所需要的各種依賴(lài)。安裝過(guò)程會(huì)比較漫長(zhǎng)，需要耐心等待一段時(shí)間。

當(dāng)出現(xiàn)類(lèi)似上面的界面，提示“Projecy ‘demo' successfully created”時(shí)，表示項(xiàng)目已經(jīng)創(chuàng)建完成。如果有錯(cuò)誤，需要檢查安裝過(guò)程或者網(wǎng)絡(luò)連接等。

項(xiàng)目創(chuàng)建完畢，會(huì)在當(dāng)前目錄下生成一個(gè)項(xiàng)目文件夾。之后我們可以進(jìn)入項(xiàng)目目錄

cd demo

然后運(yùn)行

ng serve

ng serve 命令會(huì)編譯項(xiàng)目，然后啟動(dòng)一個(gè)內(nèi)置的小型服務(wù)器，我們就可以通過(guò)瀏覽器查看項(xiàng)目的運(yùn)行結(jié)果。注意上面的提示：NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/，也就是說(shuō)，這個(gè)服務(wù)器的地址應(yīng)該是 http://localhost:4200，我們只要用瀏覽器訪(fǎng)問(wèn)這個(gè)地址即可：

可以看到 Angular CLI 默認(rèn)生成的項(xiàng)目頁(yè)面的運(yùn)行結(jié)果。

注意，這一內(nèi)置服務(wù)器僅適用于開(kāi)發(fā)測(cè)試用，并不能作為實(shí)際使用的服務(wù)器。因此，我們?nèi)绻渴鸬秸降姆?wù)器，需要將項(xiàng)目編譯成一個(gè)發(fā)布版。編譯發(fā)布版也很簡(jiǎn)單，只需使用一條命令：

ng build --prod

看完上述內(nèi)容，你們掌握怎么在Angular中使用Angular CLI的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站題目：怎么在Angular中使用AngularCLI
URL鏈接：http://chinadenli.net/article28/jpsojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、微信小程序、商城網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷(xiāo)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)