Vue 之 Vue File
之前都是使用 ES5 開發 Vue，現在要開始進入 Node.js 生態圈，使用 ECMAScript 2015 + Webpack 開發 Vue。
ECMAScript 2015 最大的貢獻就是提出 module 概念，讓我們可依照 SOLID 的 單一職責原則 來開發 JavaScript，不再如 jQuery 一樣總是寫出上千行程式碼。
Version
Vue 2.5.17
Instant Protyping
ES5
原本使用 ES5 寫的 HelloWorld 需要 3 個檔案：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Global Component</title> </head> <body> <div id="app"> <hello-world></hello-world> </div> </body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="HelloWorld.js"></script> <script src="index.js"></script> </html>
index.js
new Vue({ el: '#app' });
HelloWorld.js
Vue.component('HelloWorld', { template: '<span>Hello World</span>', });
ES6
若使用 Vue File，只需要一個檔案
Vue file 總共包含三個部分：
<template></template> <script></script> <style></style>
HelloWorld.vue
<template> <span>Hello World</span> </template> <script> export default { name: "HelloWorld" } </script> <style scoped> </style>
第 1 行
<template> <span>Hello World</span> </template>
相當於 Vue Template。
第 5 行
export default { name: "HelloWorld" }
name 即為 component 名稱。
11 行
<style scoped> </style>
負責 CSS 部分。
Q : Vue Instance 呢 ?
Vue CLI 會自動幫你建立，讓我們更專心在 Vue Component 開發。
$ vue serve HelloWorld.vue
輸入 vue serve + 檔名 執行。
- 在瀏覽器輸入
http://localhost:8080即可立刻看到結果
vue serve 使用了預設的 Webpack 設定，背後幫我們做了很多事情，如 Babel 編譯 ECMAScript 2015、載入 Vue source、建立 Vue Instance、啟動 Web Server … 等，方便我們測試 Vue
Webpack Project
Instant Prototyping 只適合測試用，並不適合實際開發專案。
若要開發 Vue 專案，要使用 Vue CLI 幫我們建立 Webpack Project。
我們將以 ES5 版本的 MyCounter porting 到 ES6 作為示範。
main.js
import Vue from 'vue'; import App from './App.vue'; Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app');
回顧之前我們使用 ES5 開發 Vue 時，我們必須做幾件事情：
- 在
index.html載入 Vue CDN - 在
index.html載入MyCounter.js - 在
index.html載入index.js
這個載入非常重要，否則 Vue 無法正常執行。
但若使用 ECMAScript 2015，則 Webpack 會幫我們搞定這些。
第 1 行
import Vue from 'vue';
載入 Vue。
第 2 行
import App from './App.vue';
第 6 行
new Vue({ render: h => h(App), }).$mount('#app');
建立 Vue Instance，並將 app Vue Template mount 上 Vue Instance。
第 7 行
render: h => h(App),
Vue 支援兩種產生 HTML 方式：
- Vue Template (MVVM / Angular)
- Virtual DOM (JSX / React)
其中 render() 目的就是產生 Virtual DOM。
render() 在 ES5 的寫法如下：
render: function(createElement) { return createElement(App); }
render() 是 Higher Order Function，傳入 createElement() function。
將 App component 傳入 createElement() ，得到 Virtual DOM，再透過 render() 回傳。
由於 render() 只有一行，又沒有牽涉到 this ，因此可以安全改寫成 Arrow Function。
render: h => h(App);
其中 h 就是 createElement ，是 function。
如此 Vue Instance 就以 App component 為 root component 建立 HTML
App.vue
<template> <div> <my-counter v-model="outerCounter"></my-counter> <h1> {{ outerCounter }} </h1> </div> </template> <script> import MyCounter from './components/MyCounter.vue'; export default { name: 'app', components: { MyCounter, }, data() { return { outerCounter: 10, }; }, }; </script> <style> </style>
為 Vue 的 root component，相當於 ES5 的 index.html 地位。
第 1 行
<template> <div> <my-counter v-model="outerCounter"></my-counter> <h1> {{ outerCounter }} </h1> </div> </template>
使用了 <my-counter></my-counter> 。
第 9 行
import MyCounter from './components/MyCounter.vue';
由於 MyCouner component 已經獨立成單獨的 MyCounter.vue ，需要 import 進來才能用。
11 行
export default {
由於 App component 要被 main.js import，所以要宣告 export default 。
13 行
components: { MyCounter, },
宣告在 App component 包含哪些內層 component。
MyCounter.vue
<template> <div> <h1>{{ innerCounter }}</h1> <button @click="add">+1</button> <button @click="emit">Emit Counter</button> </div> </template> <script> export default { name: 'MyCounter', props: [ 'value', ], data() { return { innerCounter: this.value, }; }, methods: { add() { this.innerCounter += 1; }, emit() { this.$emit('input', this.innerCounter); }, }, }; </script> <style scoped> </style>
將原本的 MyCounter.js porting 到 MyCounter.vue 。
$ yarn serve
在專案目錄下輸入 yarn serve 執行 Webpack。
Scoped Style CSS
CSS 在設計上所面臨的困境
!important
<style scoped> </style>
任何對 CSS 的設定，只有在這個 component 有效。
- 名稱不用擔心重複
- 不會汙染其他 component
Conclusion
- 透過 ECMAScript 的 module，我們就不再寫出上千行的 JavaScript 了，可以認真依照職責去切分 module，方便維護
- Instant Prototyping 非常適合測試 Vue 功能使用
- 由 ES5 component 改寫成 ES6 Vue file 需要改寫部分程式碼，但觀念是一樣的