Setup a Vue Webpack Simple Project Using Vue CLI

vue-cli

安裝 Vue CLI

1
$ npm i -g vue/cli # 全域安裝

使用 Vue CLI 建立專案

1
2
# vue init <模板名稱> <專案名稱>
$ vue init webpack-simple <專案名稱>

使用 Vue CLI 初始化專案，共有六種模版可選，這次使用的 webpack-simple 是選用 Webpack 作為整合工具搭配 Vue Loader 的快速開發模板。設定上較單純，若想使用完整配備的高級模板，則選用 webpack 。

安裝所需模組

1
$ npm i

編輯 App.vue

App.vue 是 Single File Component ，是以單檔方式呈現的組件。 Single File Component 的架構如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template></template>

<script>
export default {
  data () {
    return {
    
    }
  }
}
</script>

<style lang="scss"></style>

<template> 區塊用來放置 HTML 模板。
<script> 區塊主要分兩個部分， export 和 import ， import 用來匯入其他組件（.vue 檔案）， export 裡面可以寫與該組件相關的資料和 JS 。
<style> 區塊用來放置樣式檔。如果要使用 SASS 可加入 lang="scss" 屬性。

開發模式或輸出

package.json 的 scripts 內定義了開發跟輸出所分別使用的指令。
npm run dev ：進入開發模式，由於內建 Hot Reload 的功能， 任何程式碼的變動都會即時反映到瀏覽器上。
npm run build ：將生產版本輸出。

使用流程在這邊告一段落，下面記錄和運作原理較相關的資訊。

設定檔 webpack.config.js

由於使用 Webpack 作為整合工具，所有和專案相關的設定檔都放在 webpack.config.js 。

和一般的 webpack.config.js 相同，擁有 Entry 、 Output 、 Loader 、 Plugin 四大塊。

進入點 main.js 與輸出檔 build.js

根據 webpack.config.js 檔，進入點定義在 src/main.js 。 輸出檔定義在 dist/build.js 。

index.html 被寫死在根目錄，打開該檔可以看到 build.js 已被引入。

main.js

main.js 是專案的進入點，也是 Vue 實例所在位置。檔案內容如下：

1
2
3
4
5
6
7
8
/* main.js */
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

el

傳入 Vue 實例的參數中， el 代表 Vue 實例掛載的位置，也就是 Vue 的作用範圍，在這裡為 index.html 內的 <div id="app"></div> 。

render

render: h => h(App) 其實是精簡後的寫法，原來的樣貌如下：

1
2
3
render: function (createElement) {
    return createElement(App);
}

瀏覽器利用 DOM Tree 控管呈現在頁面上的元素。而相較於實體的 DOM Tree ， Vue 利用 Render Function 生成虛擬 DOM （Virtual DOM），並在編譯階段將虛擬 DOM 轉換成真實的 DOM 呈現到頁面上。

所謂虛擬 DOM 只是一段輕量化的 JS 程式碼，該程式碼記錄了描述 DOM 的資訊，但並非 DOM 。

將實體與虛擬 DOM 分離讓 Vue 操控 DOM 更加彈性，例如只需要虛擬 DOM 所記載的資訊，就可以選擇在 Server 做 Server Side Rendering 或是在前端 Render ，或者讓手機依照虛擬 DOM 所記錄的資訊操控手機端原生的元件等。

如上程式碼， App 是 Single File Component ，以模組的方式被引入的 main.js ，經過 Loader 編譯後，作為參數被傳進 Render Function ，轉換成虛擬 DOM ，最後被 Vue 編譯為實體 DOM 呈現到頁面上。

Reference

  1. main.js 內的 Render Function
  2. Vue Render Function 運作原理