? ? ? ?之前使用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é)請參照：
