? ? ? ?之前使用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è)文件夾,如圖原环。
在此路徑下運(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/
其實(shí),我們可以把新建項(xiàng)目文件夾的位置放到這里愿卸,因?yàn)橹鞍惭b的yo和generator都是全局的灵临,我們看路徑就明白了。
我們在新建的文件夾mytodo下趴荸,再次運(yùn)行"yo"命令儒溉,選擇剛才安裝的generator包"Fountain-vue",run 一下
接下來會依次出現(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é)請參照: