angular2+開發(fā)環(huán)境搭建

一、安裝node.js運(yùn)行環(huán)境,安裝NPM包管理工具(安裝node運(yùn)行環(huán)境時(shí)會(huì)附帶NPM包管理工具)

1、進(jìn)入(https://nodejs.org/en/download/)下載 LTS6.10.0+ Window 64bit .msi 文件 (ps:目前公司開發(fā)環(huán)境Node版本是,可以使用Nvm管理工具管理Node的版本問題,可以實(shí)現(xiàn)電腦上面安裝多個(gè)Node的版本)

2、運(yùn)行下載好的 Window 64bit .msi 安裝文件(一路點(diǎn)擊Next默認(rèn)安裝即可)

3.查看Node版本和Npm版本
(1)、查看已安裝Node版本: node -v
(2)、查看Npm版本: npm -v

二、切換npm的默認(rèn)源為淘寶鏡像

1、查看當(dāng)前npm源 npm config get registry ,默認(rèn)為 https://registry.npmjs.org/ (源即為執(zhí)行 npm install 時(shí)默認(rèn)從哪個(gè)倉(cāng)庫(kù)拉取npm包)

2、修改npm源(以下方式三選一)
(1)、通過config命令,執(zhí)行 window+R 鍵,輸入cmd打開Window的Dos命令框,輸入 npm config set registry https://registry.npm.taobao.org
(2)、命令行指定,執(zhí)行 window+R 鍵,輸入cmd打開Window的Dos命令框,輸入 npm --registry https://registry.npm.taobao.org info underscore
(3)、編輯 ~/.npmrc 文件并加入下面內(nèi)容,打開文件資源管理器,在 C:/Users/電腦名 路徑下即可找到 ~/.npmrc ,打開 ~/.npmrc 替換 registry = https://registry.npm.taobao.org

三、安裝angular-cli腳手架工具

1、執(zhí)行 npm install -g @angular/cli 全局安裝angular-cli腳手架工具,使用 ng -v 成功查詢到angular-cli腳手架的版本號(hào)即為安裝成功,更多ng腳手架操作請(qǐng)執(zhí)行 ng help

四、使用angular-cli腳手架初始化項(xiàng)目

1、進(jìn)入到準(zhǔn)備存放項(xiàng)目的文件夾,使用 shift+鼠標(biāo)右鍵 彈出提示框,選擇 在此處打開命令窗口 (或者 W鍵+Enter鍵) 彈出Window Dos命令框

2、在Dos命令框里面輸入 ng new 項(xiàng)目名稱 即可下載使用腳手架開發(fā)項(xiàng)目的基本模板

3、cd 進(jìn)入下載的項(xiàng)目文件夾,執(zhí)行 npm install 安裝項(xiàng)目的依賴包

4、等待項(xiàng)目依賴包安裝完畢,執(zhí)行 ng serve 即可用啟動(dòng)項(xiàng)目

5、項(xiàng)目開發(fā)完畢后可使用 ng build 打包項(xiàng)目(angular4+版本默認(rèn)是使用--aot編譯,angular2版本要使用 ng build --aot --prod)

五、安裝node-sass包(此步驟為可選,當(dāng)你想在本地編譯sass文件或者項(xiàng)目組件中使用.sass文件編寫樣式文件須安裝此npm包)

1.由于直接執(zhí)行 npm install -g node-sass 命令安裝node-sass包肯定會(huì)失敗,所以你有如下幾種解決辦法
(1)、翻墻下載,確保你的電腦網(wǎng)絡(luò)是翻墻的狀態(tài)下執(zhí)行 npm install -g node-sass
(2)、使用node-sass離線安裝包離線安裝node-sass包

六、你可能會(huì)遇到的安裝失敗情況及其解決辦法

1.node-sass安裝失敗(node-sass需要前置c++環(huán)境,node-sass被墻)
(1)、由于angular4.0項(xiàng)目依賴?yán)锩嫒∠藢?duì)node-sass的默認(rèn)依賴,所以使用 npm install 安裝項(xiàng)目依賴的時(shí)候不會(huì)報(bào)錯(cuò)

(2)、如果項(xiàng)目組件中需要使用.scss文件,你需要安裝node-sass包

(3)、安裝node-sass的依賴環(huán)境(主要是依賴的c++環(huán)境),在window Dos命令框輸入 npm install --global --production windows-build-tools

(4)、翻墻下載:網(wǎng)絡(luò)翻墻之后,打開Window Dos命令框,輸入 npm install -g node-sass,使用node-sass -v可以查看node-sass的版本即為下載成功,反之則為失敗

(5)、如果你不能翻墻則采用這種辦法,下載node-sass離線包(win32-x64-51_binding.node,x64-48版本以上都行),打開window文件資源管理器,找到 C:/Users /window用戶名/AppData/Roaming/npm-cache/node-sass/4.5.3(node-sass版本號(hào)) 文件夾,刪除里面的package文件夾和package.tgz文件,然后放入win32-x64-51_binding.node文件,然后打開window Dos命令框輸入 npm install -g node-sass 全局安裝node-sass包,腳手架生成的項(xiàng)目也需要使用 npm install node-sass安裝項(xiàng)目的node-sass依賴包,使用node-sass -v可以查看node-sass的版本即為下載成功,反之則為失敗(ps:解釋一下為什么需要全局安裝和項(xiàng)目安裝,全局安裝是為了使用node-sass命令編譯靜態(tài)資源里面的.scss文件為.css文件,項(xiàng)目安裝是因?yàn)槟沩?xiàng)目組件里面使用.scss文件,則需要安裝項(xiàng)目的sass編譯環(huán)境,也就是說項(xiàng)目打包編譯時(shí)并不會(huì)主動(dòng)去全局找node-sass包編譯.scss文件)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容