一、安裝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文件)