Vue 的嫑嫑的 Vue-cli ( 1 )

教練，我想趕快開始寫程式阿

Vue-Cli from scratch | Osaki Hsieh

時至今日，前端開發的複雜跟過去已不可同日而語
為了開始一個新專案，需要拉一堆有的沒的的庫、拉一堆大的小的依賴包，
拉了庫、拉了依賴，還需要弄個 Development Server 方便開發，

好不容易佈好開發環境，半天就過去了，
主管關心今天進度如何的時候，只能面帶尷尬的看著螢幕上白白一片的 'Hello World!' 準備加班，像個十足的魯蛇

想不加班，就得簡化自己的工作流程，
這類重複性質高的瑣事，就該交給電腦自動化處理

所以我們需要用 Yeoman 之類的工具，
幫忙對 gulp、webpack 等工具做些開發前的設定，
既然都用了 Vue.js 作為主要的庫了，
那官方提供的 Vue-cli 肯定是建構工具的首選

Installation

首先，我們開啟終端機，先在開發的電腦上安裝 Vue-cli

$ npm install -g vue-cli

Commands

接著輸入 vue 來看看 Vue-cli 裡的幾個命令
Vue-cli 一共只有四個命令，看到這裡，
大致上已經可以直接開始做開發了

// 初始化一個 Vue 專案
$ vue init [template-name] [project-name]
// 官方 Vue Template 列表
$ vue list
// 測試 .vue 單檔
$ vue build [entry]
// 恩..對，就是幫助訊息
$ vue help [cmd]

Templates

輸入 vue list 可以看到官方提供的幾個 Vue.js 建構樣板
如果沒什麼想法的話，推薦使用 webpack 這個樣板，他有比較完整的轉譯、代碼審查、建構及測試工具

• simple
  index.html + Vue CDN import
• webpack-simple
  基本的 Webpack + vue-loader 開發流程
• webpack
  完整的 Webpack + vue-loader 開發流程，包含linting、測試工具
• browserify
  完整的 Browserify + vueify 開發流程，包含linting、測試工具

Init

最後我們來初始化一個新的 Vue 專案，
以上個區塊推薦的 webpack 樣板為例，

$ vue init webpack my-vue-project
$ cd my-vue-project && npm install && npm run dev

原本複雜的工作流程，現在簡化成只需要這樣兩行搞定，
馬上就得到一個原本需要半天時間才出現的 'Hello World!'
馬上就可以開始真正的開發作業，
馬上就晉升高級工程師
馬上考試都一百分

另外的 vue build 到底是什麼鬼東西，能幹嘛 ?
還有怎麼建構、使用自己寫的 vue-template ?
就留到下一篇啦，掰噗