這兩天 JavaScript 圈子的最大新聞應該就是 Facebook 發布了一套新的 JavaScript 套件管理工具 Yarn,感覺來勢洶洶勢不可擋。 實際花了一點時間試用,表現的確也比過去 npm 好很多,尤其過去 npm install 速度過慢,套件相依衝突的問題,目前在 Yarn 還沒遇到。 即使是剛開始 yarn run scripts 無法帶入參數的問題,在發布的第二天也快速地更新 (v0.15.1) 解決了。 👍

有關 Yarn 介紹的部分,已經有其他前輩分享了,推薦可以看看這篇 取代 npm 的新利器 Yarn

既然 Yarn 號稱可以用來取代 npm,那麼身為 Vue 的愛好者,也想馬上來試試 Vue-cli 這套 Vue 的樣板工具包是否也可以透過 yarn 來單獨執行。

既然要取代 npm,那麼第一件事情就是把 npm 整包幹掉,關於刪掉 npm modules 的過程我是參考 stackoverflow 的這篇: Command to remove all npm modules globally?,但實際上 Yarn 與 npm 是可以和平共存的,不一定要把 npm 幹掉才能跑 Yarn ,這裡只是想簡單做個試驗,啾咪 ^.<

然後安裝 Yarn。 執行 curl -o- -L https://yarnpkg.com/install.sh | bash 即可。


第一步:安裝 vue-cli

很簡單,把原本的 npm install -g vue-cli 改成 yarn global add vue-cli 就可以了。執行的時候像這樣:

而安裝完畢後,執行 yarn vue 應該可以看到這樣的畫面。

每執行完一個指令還會告訴你它跑了多久喔,非常囂張 (誤)

第二步:初始化 Vue 專案

接著,就來初始化我們的 Vue 專案。 Vue-cli 這個 scaffolding 工具官方目前提供了幾種 template 讓開發者自行選擇, 像是大家常見的 webpack、browserify 都有。當然也可以挑選什麼都沒有的 simple: 就是最基本的 Vue 專案這樣。 如果想更詳細了解各種 template 細節的話,可以到 vue-templates 的 Repo 去看。

這裡我就選擇拿「webpack-simple」當範例。

執行 yarn vue init webpack-simple my-project

因為 VueJS 目前已經發佈至 2.0 版了,所以你會看到 Vue-cli 很貼心地提醒你現在安裝的是 2.0 的版本。 若你想安裝的是 1.x 版本的話,可以改成
yarn vue init webpack-simple#1.0 my-project 即可。

然後,Vue-cli 會幫我們建立一個新目錄 my-project

透過 cd my-project 切換到新專案目錄後,我們將原本的 npm install 改成直接執行 yarn 即可。

第三步:啟動並執行 vue 專案

最後,直接執行 yarn run dev 應該會看到像這樣的畫面。

打開你的瀏覽器連到 http://localhost:8080/ 看到 Hello Vue! 的字樣就代表成功執行囉!