一、安裝node.js運行環(huán)境,安裝NPM包管理工具(安裝node運行環(huán)境時會附帶NPM包管理工具)
1、進入(https://nodejs.org/en/download/)下載
LTS6.10.0+ Window 64bit .msi
文件 (ps:目前公司開發(fā)環(huán)境Node版本是,可以使用Nvm管理工具管理Node的版本問題,可以實現(xiàn)電腦上面安裝多個Node的版本)2、運行下載好的
Window 64bit .msi
安裝文件(一路點擊Next默認安裝即可)3.查看Node版本和Npm版本
(1)、查看已安裝Node版本:node -v
(2)、查看Npm版本:npm -v
二、切換npm的默認源為淘寶鏡像
1、查看當前npm源
npm config get registry
,默認為https://registry.npmjs.org/
(源即為執(zhí)行npm install
時默認從哪個倉庫拉取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腳手架的版本號即為安裝成功,更多ng腳手架操作請執(zhí)行ng help
四、使用angular-cli腳手架初始化項目
1、進入到準備存放項目的文件夾,使用
shift+鼠標右鍵
彈出提示框,選擇在此處打開命令窗口
(或者W鍵+Enter鍵
) 彈出Window Dos命令框2、在Dos命令框里面輸入
ng new 項目名稱
即可下載使用腳手架開發(fā)項目的基本模板3、cd 進入下載的項目文件夾,執(zhí)行
npm install
安裝項目的依賴包4、等待項目依賴包安裝完畢,執(zhí)行
ng serve
即可用啟動項目5、項目開發(fā)完畢后可使用
ng build
打包項目(angular4+版本默認是使用--aot編譯,angular2版本要使用ng build --aot --prod
)
五、安裝node-sass包(此步驟為可選,當你想在本地編譯sass文件或者項目組件中使用.sass文件編寫樣式文件須安裝此npm包)
1.由于直接執(zhí)行
npm install -g node-sass
命令安裝node-sass包肯定會失敗,所以你有如下幾種解決辦法
(1)、翻墻下載,確保你的電腦網(wǎng)絡是翻墻的狀態(tài)下執(zhí)行npm install -g node-sass
(2)、使用node-sass離線安裝包離線安裝node-sass包
六、你可能會遇到的安裝失敗情況及其解決辦法
1.node-sass安裝失敗(node-sass需要前置c++環(huán)境,node-sass被墻)
(1)、由于angular4.0項目依賴里面取消了對node-sass的默認依賴,所以使用npm install
安裝項目依賴的時候不會報錯(2)、如果項目組件中需要使用.scss文件,你需要安裝node-sass包
(3)、安裝node-sass的依賴環(huán)境(主要是依賴的c++環(huán)境),在window Dos命令框輸入
npm install --global --production windows-build-tools
(4)、翻墻下載:網(wǎng)絡翻墻之后,打開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版本號)
文件夾,刪除里面的package文件夾和package.tgz文件,然后放入win32-x64-51_binding.node文件,然后打開window Dos命令框輸入npm install -g node-sass
全局安裝node-sass包,腳手架生成的項目也需要使用npm install node-sass
安裝項目的node-sass依賴包,使用node-sass -v可以查看node-sass的版本即為下載成功,反之則為失敗(ps:解釋一下為什么需要全局安裝和項目安裝,全局安裝是為了使用node-sass命令編譯靜態(tài)資源里面的.scss文件為.css文件,項目安裝是因為你項目組件里面使用.scss文件,則需要安裝項目的sass編譯環(huán)境,也就是說項目打包編譯時并不會主動去全局找node-sass包編譯.scss文件)