WIN10下搭建vue開發(fā)環(huán)境

轉(zhuǎn)自網(wǎng)頁:http://www.cnblogs.com/ixxonline/p/6007885.html

特別說明:下面任何命令都是在windows的命令行工具下進(jìn)行輸入碰酝,打開命令行工具的快捷方式如下圖:

詳細(xì)的安裝步驟如下:

一笤虫、安裝node.js

說明:安裝node.js的windows版本后疾嗅,會(huì)自動(dòng)安裝好node以及包管理工具npm端圈,我們后續(xù)的安裝將依賴npm工具。

node.js的官方地址為:https://nodejs.org/en/download/,如下圖所示:

根據(jù)自己電腦的具體配置,選擇你要下載的安裝包双妨,作者選擇的是windows 64bit。

下載完畢叮阅,按照windows一般應(yīng)用程序刁品,一路next就可以安裝成功,建議不要安裝在系統(tǒng)盤(如C:)浩姥。

二挑随、設(shè)置global和cache路徑

說明:設(shè)置路徑能夠把通過npm安裝的模塊集中在一起,便于管理勒叠。

1兜挨、在nodejs的安裝目錄下膏孟,新建node_global和node_cache兩個(gè)文件夾,作者的安裝目錄為“D:\Program Files\nodejs\”

2拌汇、設(shè)置global和cache

npm config set prefix "D:\Program Files\nodejs\node_global"

npm config set cache "D:\Program Files\nodejs\node_cache"

設(shè)置成功后柒桑,后續(xù)用命令npm install XXX -g安裝以后模塊就在D:\Program Files\nodejs\node_global\node_modules里

三、安裝cnpm

說明:由于許多npm包都是在國外担猛,我們這里用到淘寶的鏡像服務(wù)器幕垦,來對(duì)我們依賴的module進(jìn)行安裝,因此首先安裝“中國的npm”——cnpm

參考網(wǎng)址如下:http://npm.taobao.org/

安裝命令為:

npm?install?-g?cnpm?--registry=https://registry.npm.taobao.org

四傅联、設(shè)置環(huán)境變量(非常重要)

說明:設(shè)置環(huán)境變量可以使得住任意目錄下都可以使用cnpm、vue等命令疚察,而不需要輸入全路徑

1蒸走、鼠標(biāo)右鍵"此電腦",選擇“屬性”菜單貌嫡,在彈出的“系統(tǒng)”對(duì)話框中左側(cè)選擇“高級(jí)系統(tǒng)設(shè)置”比驻,彈出“系統(tǒng)屬性”對(duì)話框。

2岛抄、點(diǎn)擊環(huán)境變量彈出下列對(duì)話框:

3别惦、修改用戶變量PATH:

選中PATH,點(diǎn)擊編輯夫椭,在已有的變量后面掸掸,加入英文的";",然后把“D:\Program Files\nodejs\node_global”加到后面

4蹭秋、新增系統(tǒng)變量NODE_PATH:

在下面的系統(tǒng)變量中點(diǎn)擊新建扰付,彈出下框,把變量值設(shè)置成“D:\Program Files\nodejs\node_global\node_modules”

第四第五步仁讨,要先進(jìn)入你要安裝的項(xiàng)目文件夾下

四羽莺、用cnpm安裝vue

cnpm?install?vue -g

五、安裝vue命令行工具

cnpm?install vue-cli?-g

六洞豁、創(chuàng)建工程

1盐固、用cd命令來到你將要新建工程的目錄,如“C:\Users\Administrator\Desktop\birdhelper>”

創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目丈挟,工程名為birdhelper刁卜。

1、vue init webpack mytest礁哄,具體步驟如下圖所示:

2长酗、初始化完成后的目錄結(jié)構(gòu)如下:

3、定位到mytest的工程目錄下

cd mytest

4桐绒、安裝該工程依賴的模塊夺脾,這些模塊將被安裝在:mytest\node_module目錄下之拨,node_module文件夾會(huì)被新建,而且根據(jù)package.json的配置下載該項(xiàng)目的modules

cnpm install

5咧叭、運(yùn)行該項(xiàng)目蚀乔,測(cè)試一下該項(xiàng)目是否能夠正常工作,這種方式是用nodejs來啟動(dòng)菲茬。

cnpm run dev

6吉挣、有時(shí)我們的服務(wù)器并不一定是node,也許是IIS婉弹,這樣我們就需要把工程構(gòu)建出來睬魂,與IIS集成。

構(gòu)建該項(xiàng)目的命令如下

cnpm run build

將dist文件夾拷貝出來镀赌,放到IIS的發(fā)布目錄氯哮,在瀏覽器中輸入IIS設(shè)置的本機(jī)ip和端口進(jìn)行訪問即可。Good Luck, guys商佛!

至此喉钢,我們已經(jīng)在win10下搭建成功了vue,并能和iis服務(wù)器進(jìn)行集成良姆。為.net框架開發(fā)web應(yīng)用帶來了棒棒的vue肠虽。

如果你從GitHub上新下載了一個(gè)項(xiàng)目,項(xiàng)目中可能會(huì)缺少一個(gè)名為node_modules的文件夾玛追,要想讓它運(yùn)行税课,必須

1.進(jìn)入項(xiàng)目文件下

2.npm install

3.npm run build

4.npm install npm-cli

5.npm run dev

下次再運(yùn)行的時(shí)候,只需進(jìn)入項(xiàng)目豹缀,再npm run dev即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伯复,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子邢笙,更是在濱河造成了極大的恐慌啸如,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件氮惯,死亡現(xiàn)場(chǎng)離奇詭異叮雳,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)妇汗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門帘不,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人杨箭,你說我怎么就攤上這事寞焙。” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵捣郊,是天一觀的道長辽狈。 經(jīng)常有香客問我,道長呛牲,這世上最難降的妖魔是什么刮萌? 我笑而不...
    開封第一講書人閱讀 55,306評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮娘扩,結(jié)果婚禮上着茸,老公的妹妹穿的比我還像新娘始衅。我一直安慰自己紊册,他們只是感情好拴驮,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評(píng)論 5 373
  • 文/花漫 我一把揭開白布抖部。 她就那樣靜靜地躺著,像睡著了一般盅称。 火紅的嫁衣襯著肌膚如雪蜗顽。 梳的紋絲不亂的頭發(fā)上萍膛,一...
    開封第一講書人閱讀 49,071評(píng)論 1 285
  • 那天验懊,我揣著相機(jī)與錄音,去河邊找鬼尸变。 笑死义图,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的召烂。 我是一名探鬼主播碱工,決...
    沈念sama閱讀 38,382評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼奏夫!你這毒婦竟也來了怕篷?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,006評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤酗昼,失蹤者是張志新(化名)和其女友劉穎廊谓,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體麻削,經(jīng)...
    沈念sama閱讀 43,512評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蒸痹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了呛哟。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叠荠。...
    茶點(diǎn)故事閱讀 38,094評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖扫责,靈堂內(nèi)的尸體忽然破棺而出榛鼎,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評(píng)論 4 323
  • 正文 年R本政府宣布者娱,位于F島的核電站抡笼,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏肺然。R本人自食惡果不足惜蔫缸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望际起。 院中可真熱鬧拾碌,春花似錦、人聲如沸街望。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽灾前。三九已至防症,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間哎甲,已是汗流浹背蔫敲。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留炭玫,地道東北人奈嘿。 一個(gè)月前我還...
    沈念sama閱讀 45,536評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像吞加,于是被迫代替她去往敵國和親裙犹。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評(píng)論 2 345

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