Vuejs本身的構建工具

最近， 尤大在和人對噴的時候，悄然放出了一個大招，因而爲了追趕他的步伐，趕忙試驗了下，而且把原文給你們翻譯下。

原文地址：Announcing vue-cli

譯文源地址： Vuejs本身的構建工具

先上原文翻譯：

最近有不少大量關於React項目的構建工具討論帖子，幸運的是，對於Vue.js來講，若是你想要快速開始，那麼你只須要在你的html中引入一個<script>標籤，加上CDN的地址便可。可是，這並不算是一個完整的vue實際應用。在實際應用中，咱們必需要一系列的工具，包括：模塊化，轉譯，預處理，熱加載，靜態檢測和自動化測試等。對於一個須要長期維護和大型的項目而言，這些工具是必不可少的，可是嘗試配置初始化這些很痛苦（還不是大家這些做者總是改來改去的）.這就是咱們發佈vue-cli的緣由，一個簡單的構建工具，經過幾個默認的步驟幫助你快速的構建Vue.js項目。

Just The Scaffolding

使用方式以下：(shell 命令)

npm install -g vue-cli
vue init webpack my-project
# answer prompts
cd my-project
npm install
npm run dev 
# tada! finish

其實就是從Github上的vuejs-templates組織拉取代碼，安裝npm的依賴，而後創建一個簡單的npm任務。安裝完成之後大概是這個樣子的。

Official Templates

目前官方的項目模板目的是幫助你們經過固定的和可設置的幾個步驟快速開始咱們的應用。然而，這些模板並不限制你本身對於使用Vue.js的架構組織和選擇類庫。

全部的官方項目模板在vuejs-templates organization。若是有新的模板添加進來，你須要使用下列命令，

vue init <template-name> <project-name>

也可使用 vue list 命令來查看全部的官方模板列表。

目前可用的模板包括：

• browserify--全功能的Browserify + vueify，包括熱加載，靜態檢測，單元測試

• browserify-simple--一個簡易的Browserify + vueify，以便於快速開始。

• webpack--全功能的Webpack + vueify，包括熱加載，靜態檢測，單元測試

• webpack-simple--一個簡易的Webpack + vueify，以便於快速開始。

Bring Your Own Setup

固然，做爲自由開發者，你若是不喜歡上面的模板，你能夠fork這些模板，修改他們以符合你本身特殊要求（甚至還能夠建立一個你本身的模板），經過 vue-cli 命令使用。

vue init username/repo my-project

Vue Components Everywhere

不一樣的模板有不一樣的用處： 簡易的能夠更快速的開發，全功能適合有野心的（大型、牛逼的--我的認爲）應用。他們的共同點就是，都支持 .vue文件類型的組件方式。意味着任何只要符合 .vue形式的第三方的組件均可以被使用，而且發佈在NPM上--遨遊在可複用的組件世界中吧！

下面是我我的的想法：
其實這種自動的腳手架很早就有了，最先我不知道，我接觸過的有 ruby on rails，很是強悍，構建ruby的web開發，入門很快，能快速搭建web網站。接着開始接觸到其餘的構建工具，例如： laravel --- 一個模仿rails的php框架， hexo--一個nodejs的靜態blog工具。Yeoman -- 一個前端的腳手架工具，也是利用nodejs來自動生成（因此下一次多是說Yeoman這個東東,嘻嘻）。

說說vue-cli，其實這是一個典型的腳手架，幫助開發者創建vue.js的項目，包括了配置好的 package.json 以及寫好的打包配置， 例如 webpack或者 browserify的，而且有一個簡單vue例子提供參考。這個如今看來是頗有必要的，爲何呢？由於我所在的vuejs的羣裏，幾乎天天都有人要vue的實例，或者webpack打包配置又出錯了，請求幫助，如今好了，這些問題做者幫助你解決了，你須要的記住這些命令，而且按照提示去輸入生成便可。

給你們截圖看看我已經生成完成的東東：

初始化的時候，注意 webpack是能夠更改的，例如這樣子

vue init browserify my-browserify

就是和上面類型是對應的。
那麼輸入的東西是什麼呢？ -- 就是和package.json的一些屬性對應

最好的就是能夠跑測試，這裏須要注意，按照 phantomjs 可能會出現各類錯誤，版本可能會不對，還有權限問題，最好使用 root權限安裝。若是仍是報錯，能夠嘗試這個命令：

npm install phantomjs --phantomjs_cdnurl=http://cnpmjs.org/downloads

解決方案來源： phantomjs