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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,533評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,055評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,365評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,561評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,346評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 54,889評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,978評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,118評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,637評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,558評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,739評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,246評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 43,980評論 3 346
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,619評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,347評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,702評論 2 370

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