新手 VueJS 2 + Webpack 開發設定
不借助 NuxtJS 下開始動手架起一個 VueJS 的架構，我們會使用 Webpack 建立起有 hot-reload 的開發環境。
開發環境
為了有效地在本地開發，最近使用了 Visual Studio Code 為開發工具 (以下簡稱 VSC )。雖然是 Microsoft 開發的工具， 但背後跟 Github 開發的 Atom 使用了相同的 Electron 架構來開發，速度跟 Atom 相比有過之而無不及，而且最大的好處是原生功能比 Atom 的外掛功能穩定，所以我由 Atom 轉用了 VSC。
下載 Windows/MacOS/Linus 的版本後，先安裝一些推介使用的 Extensions。
順序解說一下
- Beautify - 用來快速整理頁面
- Material Icon Theme - 根據文件格式顯示亮眼的 Icon
- npm - 在 VSC 中使用
npm指令 - One Dark Pro - 使用漂亮的黑色主題
- Vetur - Highlight Vue 文件
其中 npm 及 Vetur 都是必須的，其他美化及輔助用的跟據個人喜好安裝就好了。
安裝
接下來就會體會到 VSC 的強大之處，先按一下左下角的Error指示。
就會在底部彈出了 Terminal 的訊息列。
這裡就是以你 root folder 開啟的 Terminal，可以開始直接使用 npm 指令進行安裝。
$ npm install -g vue-cli
$ vue init webpack demo
$ cd demo
$ npm install
$ npm run dev
先在global安裝 vue-cli 指令以便安裝
使用 vue init webpack demo 指令安裝 vue 官方的 webpack template
demo 是文件部資料夾，你也可以不輸入直接在所在位置安裝
下載後會進行一些簡單設定。
? Project name
? Project description
? Author
隨便按 Enter 使用預設也可以的 (以後可以再改)
然後選擇一些安裝設定。
$ ❯ Runtime + Compiler: recommended for most users
$ Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
我們還是開發環境就選用 Runtime + Compiler 就可以，下面的是生產環境使用的輕型檔案。
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset
$ ❯ Standard (https://github.com/standard/standard)
$ Airbnb (https://github.com/airbnb/javascript)
$ none (configure it yourself)
vue-router 也是必須的
ESLint 是自動偵測你的話法格式是否整齊
這裡有 Standard 及 Airbnb 式的格式可以選擇，兩者有些不同
想提升話法質素的開發者可以選 Standard
有強迫症的開發者可以選 Airbnb :D
? Set up unit tests
? Pick a test runner
? Setup e2e tests with Nightwatch?
接下來就是安裝一些測試工具，由於只是初步建立架構，暫時不需要了。
照指示進行
$ npm install
$ npm run dev
使用 npm install 完成安裝後
以 npm run dev 開始運作了
在 (http://localhost:8080) 就可以看到測試畫面了
Hot-reload測試
說好的 hot-reload 功能呢？
馬上到 src/assets/components/HelloWorld.vue 中改一些字試試看
Save 的時候要盯緊瀏覽器啊！
一按下就馬上自動更新了！
可以開始快樂地開發了～！
