使用Yeoman構(gòu)建vuejs

? ? ? ?之前使用AngularJs的時(shí)候岖妄,一直用Yeoman構(gòu)建項(xiàng)目挤庇,感覺還不錯(cuò)。接下里的項(xiàng)目定位使用輕量型的框架旁仿,所以最近開始學(xué)習(xí)vuejs藕夫,這里插一句題外話,與facebook這幫人寫的react教程相比枯冈,@尤雨溪 寫的vuejs教程實(shí)在是太好了毅贮,中英教程,通俗易懂尘奏,贊一個(gè)滩褥!

言歸正傳,簡單介紹下Yeoman

? ? ? ?首先炫加,Yeamon就是一個(gè)工具瑰煎, 幫助你快速的開展一個(gè)項(xiàng)目工程,提供最佳實(shí)踐和工具琢感,來讓你保持高效率編碼丢间,in short探熔,它幫你完成代碼編寫之前的一些配置工作驹针。其次,Yeoman包含三個(gè)工具诀艰, yo --- 腳手架柬甥,自動生成工具饮六;Grunt、gulp --- 構(gòu)建工具 (最初只有g(shù)runt苛蒲,后面gulp火了添加進(jìn)來的)卤橄;Bower、npm --- 包管理工具 (原來是 bower臂外,后面添加了npm)窟扑。相當(dāng)于Yeoman是boss,上面這三個(gè)是打工的漏健,雖然三個(gè)打工者都是獨(dú)立的嚎货,但是在boss的指揮下卻能發(fā)揮很大的最用。

準(zhǔn)備工作:

? ? ? ? ? ? ? ? 環(huán)境:自己組裝的臺式機(jī) windows 10 (沒用過mac蔫浆,555...) ?

? ? ? ? ? ? ? ? 軟件:nodejs ? cmder? ? webstorm ??

? ? ? ? ? ? ? ? Yeoman官網(wǎng):http://yeoman.io/? ? ??

? ? ? ? ? ? ? ??Yeoman中文網(wǎng) http://www.yowebapp.com/ (英文不好的童鞋可以參考中文的殖属,不過還是以官網(wǎng)為主)

安裝:

npm install -g yo ?// 這是全局安裝,路徑默認(rèn)就可以

安裝界面
安裝成功

安裝完成之后我們就可以使用 "yo" 命令了瓦盛,我的實(shí)際項(xiàng)目在D盤洗显,所以先建去D盤建個(gè)文件夾,如圖原环。

mytodo就是剛才新建的文件夾

在此路徑下運(yùn)行"yo"命令挠唆。(webapp/Fountain Vue/Fountain webapp/Angular 是我之前使用的時(shí)候安裝的,如果是初次使用嘱吗,不會有這幾項(xiàng))

這里會有幾項(xiàng)提示损搬,初次使用我們選擇 "Install a generator(安裝一個(gè)生成器)",按Enter選擇后輸入vue柜与,我們可能會得到很多選擇巧勤,然后選擇一個(gè)自己想要的等待安裝完成就可以了(請注意,是可能弄匕!正常情況下應(yīng)該出現(xiàn)很多generator供大家選擇颅悉,但是小編的電腦就是不出現(xiàn),反而報(bào)錯(cuò))迁匠。不過沒關(guān)系剩瓶,我們可以手動安裝,命令如下:

npm install -g generator-fountain-vue? // 這里的fountain-vue 是我選擇的generator

關(guān)于generator城丧,大家可以根據(jù)自己的需要自由選擇延曙,也可以自己去創(chuàng)建一個(gè),具體方法請參照官網(wǎng)教程亡哄。

官方生成器:http://yeoman.io/generators/

我們搜索"vue"枝缔,出現(xiàn)了很多可以選擇的generator,這里小編選擇的是fountain-vue


正在安裝generator
安裝成功

其實(shí),我們可以把新建項(xiàng)目文件夾的位置放到這里愿卸,因?yàn)橹鞍惭b的yo和generator都是全局的灵临,我們看路徑就明白了。

我們在新建的文件夾mytodo下趴荸,再次運(yùn)行"yo"命令儒溉,選擇剛才安裝的generator包"Fountain-vue",run 一下

Run a generator

接下來會依次出現(xiàn)css預(yù)處理器和集成工具的一些配置選項(xiàng)发钝,這里不再贅述顿涣。之后就是等待安裝了,時(shí)間會比較長酝豪,請大家耐心等待园骆。如果安裝過程卡住或者報(bào)錯(cuò),請大家檢查安裝信息的配置時(shí)候正確或者重新安裝寓调。安裝成功后的界面锌唾,大體上是這樣的:

最后,輸入啟動命令

npm run serve ? // 不同的包可能啟動命令不同 npm run start || npm start 等

啟動完成

瀏覽器地址欄輸入: http://localhost:3000/

單頁

接下來夺英,我們就可以用編輯器打開我們的工程晌涕,開始碼代碼了,怎么樣痛悯,還是挺快的吧余黎!

當(dāng)然,vue也有自己的構(gòu)建工具vue-cli载萌,我們在接下來的會繼續(xù)更新惧财,歡迎大家轉(zhuǎn)閱!

剛才使用 vue-cli 構(gòu)建了個(gè)項(xiàng)目扭仁,前后五步就完成了垮衷,所以就不單獨(dú)更新了,具體細(xì)節(jié)請參照:

Vuejs自己的構(gòu)建工具:www.reibang.com/p/f8e21d87a572

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末乖坠,一起剝皮案震驚了整個(gè)濱河市搀突,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌熊泵,老刑警劉巖仰迁,帶你破解...
    沈念sama閱讀 222,946評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異顽分,居然都是意外死亡徐许,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評論 3 399
  • 文/潘曉璐 我一進(jìn)店門卒蘸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來雌隅,“玉大人,你說我怎么就攤上這事〕尾剑” “怎么了冰蘑?”我有些...
    開封第一講書人閱讀 169,716評論 0 364
  • 文/不壞的土叔 我叫張陵和泌,是天一觀的道長村缸。 經(jīng)常有香客問我,道長武氓,這世上最難降的妖魔是什么梯皿? 我笑而不...
    開封第一講書人閱讀 60,222評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮县恕,結(jié)果婚禮上东羹,老公的妹妹穿的比我還像新娘。我一直安慰自己忠烛,他們只是感情好属提,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著美尸,像睡著了一般冤议。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上师坎,一...
    開封第一講書人閱讀 52,807評論 1 314
  • 那天恕酸,我揣著相機(jī)與錄音,去河邊找鬼胯陋。 笑死蕊温,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的遏乔。 我是一名探鬼主播义矛,決...
    沈念sama閱讀 41,235評論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼盟萨!你這毒婦竟也來了症革?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評論 0 277
  • 序言:老撾萬榮一對情侶失蹤鸯旁,失蹤者是張志新(化名)和其女友劉穎噪矛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體铺罢,經(jīng)...
    沈念sama閱讀 46,712評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡艇挨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了韭赘。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缩滨。...
    茶點(diǎn)故事閱讀 40,926評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出脉漏,到底是詐尸還是另有隱情苞冯,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評論 5 351
  • 正文 年R本政府宣布侧巨,位于F島的核電站舅锄,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏司忱。R本人自食惡果不足惜皇忿,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望坦仍。 院中可真熱鬧鳍烁,春花似錦、人聲如沸繁扎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梳玫。三九已至爹梁,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間汽纠,已是汗流浹背卫键。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留虱朵,地道東北人莉炉。 一個(gè)月前我還...
    沈念sama閱讀 49,368評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像碴犬,于是被迫代替她去往敵國和親絮宁。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評論 2 361

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