Vue.js 學習筆記之五：編譯 vue 元件
正如上一篇筆記中所說，直接使用 ES6 標準提供的模組規範來編寫 Vue 元件在很多情況下可能並不是最佳實踐。主要原因有兩個，首先是市面上還有許多並沒有對 ES6 標準提供完全支援的 Web 瀏覽器，這樣做可能會導致某些使用者無法使用應用程式。其次，即使將來所有的 Web 瀏覽器都完全支援了 ES6 標準規範，直接在 JavaScript 原生的字串物件中編寫 HTML 模版的做法也會讓我們的程式設計工具無法對其進行高亮顯示與語法檢查，這不僅會讓程式設計體驗大打折扣，也會增加編碼的出錯概率。為了解決這個問題，Vue 社群專門定義了一種編寫 Vue 元件的檔案格式，例如對於component_2
sayHello.js模組檔案，我們可以將其重寫為一個名為sayHello.vue的 Vue 元件檔案，具體內容如 下：
<template> <div class="box"> <h1>你好， {{ you }}！</h1> <input type="text" v-model="you" /> </div> </template> <script> const sayHello = { name: 'sayHello', props : ['who'], data : function() { return { you: this.who } } }; export default sayHello; </script> <style scoped> .box { height: 150px; width: 250px; background-color: #ccc; } </style>
如你所見，這個專用檔案實際上是一個 XML 格式的檔案，它主要由三個標籤組成：首先是<template>標籤，用於定義元件的 HTML 模版，其作用就相當於之前在sayHello.js中定義的tpl字串物件，區別在於該標籤中的內容會被自動關聯到元件物件的template模版屬性上。接下來是<script>標籤，用於定義元件物件本身，這部分程式碼與之前sayHello.js檔案中的內容基本相同，只是無需再手動定義元件的template值了。最後是<style>標籤，用於定義元件的 CSS 樣式，當然了，這部分是可以省略的，如果沒有樣式可以定義就不必寫。
在瞭解了專用於定義 vue 元件的檔案格式之後，我們接下來要面對的一個問題是，JavaScript 直譯器本身並不認識這種格式的檔案，所以接下來的工作是要用 babel 和 webpack 這些工具將其編譯成普通的 JavaScript 程式碼檔案，現在就通過第三個實驗記錄一下這部分的工作，其主要步驟如下：
-
在
code/00_test目錄中再建立一個名為component_3的實驗目錄，並在該目錄下執行npm init -y命令將其初始化成一個 Node.js 專案。 -
在
component_3實驗目錄執行npm install --save vue命令將 Vue.js 框架安裝到該實驗專案中。 -
在
component_3實驗目錄執行npm install --save-dev <元件名>命令分別安裝以下元件：- webpack、webpack-cli： 用於構建專案的專用工具。
- babel、babel-core、babel-loader：用於將檔案內容轉譯成普通的 JavaScript 程式碼。
- html-webpack-plugin：用於處理 HTML 文件的 webpack 外掛。
- vue-loader、vue-template-compiler：用於處理 vue 元件檔案格式的 webpack 外掛。
- css-loader、vue-style-loader：用於處理 CSS 樣式的 webpack 外掛。
請注意，以上元件的版本必須與當前使用的 Node.js 執行環境的版本相匹配，否則在後續工作中會遇到各種意想不到的麻煩。
-
在
component_3實驗目錄下建立一個名為src的目錄，用於存放將要被編譯的原始碼。 -
將之前建立的
sayHello.vue儲存在src原始碼目錄中，並在該目錄下建立以下檔案：-
index.htm檔案：<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>學習 vue 元件實驗（3）：以專用檔案格式註冊元件</title> </head> <body> <div id="app"> <say-hello :who="who"></say-hello> </div> </body> </html> -
main.js檔案：import Vue from 'vue'; import sayHello from './sayHello.vue'; new Vue({ el: '#app', components: { 'say-hello': sayHello }, data: { who:'vue' } });
-
-
在
component_3實驗目錄下建立一個名為webpack.config.js的 webpack 配置檔案，並在其中輸入如下程式碼：const path = require('path'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const config = { entry: { main: path.join(__dirname,'src/main.js') }, output: { path: path.resolve(__dirname,'./public/'), filename:'js/[name]-bundle.js' }, plugins:[ new VueLoaderPlugin(), new HtmlWebpackPlugin({ template: path.join(__dirname, 'src/index.htm') }) ], module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.css/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } }; module.exports = config; -
在
component_3實驗目錄下將package.json檔案中的script項修改如下："scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "rm -rf ./public/* && node_modules/.bin/webpack" } -
在
component_3實驗目錄下建立一個名為public的目錄，用於存放編譯結果。 -
在
component_3實驗目錄下執行npm run build命令，就可以在public目錄下看到編譯結果了。 -
用瀏覽器訪問
public目錄下的index.html檔案，就可以看到最後的結果了，如下圖所示：
當然了，webpack 的配置工作是一個非常複雜和繁瑣的過程，你在這裡看到的只是滄海一粟，更復雜的內容請參考 webpack 的官方文件。