新手 VueJS 2 + Webpack 開發設定

Edmond Yip -

不借助 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 的時候要盯緊瀏覽器啊！

一按下就馬上自動更新了！
可以開始快樂地開發了～！