使用 Vue-cli 快速建立 Vue 專案樣板

Vue 官方提供了一個 vue-cli 工具可以快速建立 vue 的專案，首先你需要以下:

• Node.js 環境
• Npm

接者透過 npm 安裝 vue-cli，-g 代表是全域安裝。

npm install -g vue-cli

初始化一個專案的方式:

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

其實這個工具比較像是基礎的 Vue 的 scaffolding 工具。
<template-name> 可以輸入官方提供的幾種專案的 template，依照你個人喜好，若你不知道有哪些現有的 template，裝完 vue-cli 後，下 vue list 即可以看:

每一種後面都有解釋，掛上 -simple 的當然是拔掉更多的也許你暫時不需要的功能。

• webpack: 包含 Webpack, vue-loader 以及 hot reload, linting, testing & css extraction.
• webpack-simple: A simple Webpack + vue-loader setup for quick prototyping. (比前者又更基礎版)
• browserify: Browserify + vueify setup with hot-reload, linting & unit testing.
• browserify-simple: Browserify + vueify setup for quick prototyping. (比前者又更基礎版)
• simple: 只有 Vue 跟一個 html 檔案。 

若你想要詳細斟酌這些 template 的內容，可以上 vue-templates 的 Repo 上去看看。 除了這些官方的 template，可能沒有剛好適合你的，你也可以考慮寫自己的 template，或是如果不方便上傳，也可以寫 local template，這邊不做介紹，在麻煩你移駕到 vue-cli github 上的 Readme.md 查看。

Simple Template 示範
示範: 假如你未曾用過 webpack, browserify，那就是用最基本款的 simple:

vue init simple myBlog

初始化的時候會問你一些問題，如果沒特別說什麼，就一直 enter。 (這步驟比 npm init 步驟還要少)

cd myBlog

切到 myBlog 專案目錄下。裡頭只有一個簡單的 index.html，但他不是空的檔案哦! 裡面是有 sample code的。


Webpack Template 示範

win@windeMacBook-Air /tmp  vue init webpack my-blog-w

? Project name my-blog-w
? Project description A Vue.js project
? Author winwu <XXX.gmail.com>
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-blog-w".

   To get started:

     cd my-blog-w
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

webpack 的 template 完整很多，若沒有特別的喜好，一直按下 enter 就是，專案就產生，但記得只是幫你把資料夾產生好，還是要進到資料執行 npm install 把相依性套件都裝下來。

大概是這樣，還蠻簡單的，難的是後面的應用 XDD