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 需要改寫部分程式碼，但觀念是一樣的