Vue 之青銅 I 晉級 [預先編譯]

有啥問題？

繼續學習 Vue ，我發現為啥我需要這樣引入 Vue

import {createApp} from 'vue/dist/vue.esm-bundler.js'

而不是

import {createApp} from 'vue'

看了文件 v3.cn.vuejs.org/guide/installation... 發現主要是這段話

瀏覽器內模板編譯：
vue.runtime.esm-bundler.js (預設) 僅執行時，並要求所有模板都要預先編譯。這是構建工具的預設入口 (通過 package.json 中的 module 欄位)，因為在使用構建工具時，模板通常是預先編譯的 (例如：在 *.vue 檔案中)。
vue.esm-bundler.js 包含執行時編譯器。如果你使用了一個構建工具，但仍然想要執行時的模板編譯 (例如，DOM 內模板或通過內聯 JavaScript 字串的模板)，請使用這個檔案。你需要配置你的構建工具，將 vue 設定為這個檔案。vue.esm-bundler.js 包含執行時編譯器。如果你使用了一個構建工具，但仍然想要執行時的模板編譯 (例如，DOM 內模板或通過內聯 JavaScript 字串的模板)，請使用這個檔案。你需要配置你的構建工具，將 vue 設定為這個檔案。

文件說到 模板通常是預先編譯的 所以我得預先編譯，但是啥是預先編譯。找著找著，然後我就找到了 Vue Loader 文件（https://vue-loader.vuejs.org/zh/）
終於可以繼續開始了。

事實上以下（開始）的步驟的時候我碰到了的很多問題

因為使用了 vue3 所以 vue-loader 文件在（2021-08-28）這個時間並沒有給我帶來多大的幫助，反而帶給了我很大的誤導。應該使用 vue-loader-v16
webpack 版本5的問題

因為主要是版本問題，暫時並不希望記錄下來，所以開始之前希望統一下一些東西

npm uninstall -g webpack
npm uninstall webpack
npm install -g webpack@4.46.0

開始

安裝 webpack@4.46.0 和 vue-loader-v16 和 @vue/compiler-sfc
```
npm install -D webpack@4.46.0 vue-loader-v16 @vue/compiler-sfc
```
為什麼不是 vue-template-compiler 和 vue-loader？
因為我用的是 vue3 ，在 vue3 中需要使用 @vue/compiler-sfc 而不是 vue-template-compiler 他們的各自版本的 vue 中作用是一樣的。vue-loader 同理。
配置 webpack ，編輯後 webpack.config.js 內容如下
```
const { VueLoaderPlugin } = require('vue-loader-v16')
module.exports = {
mode: 'development',
module: {
 rules: [
   // ... 其它規則
   {
     test: /\.vue$/,
     loader: 'vue-loader-v16'
   }
 ]
},
plugins: [
 // 請確保引入這個外掛！
 new VueLoaderPlugin()
]
};
```
這樣子就可以引入 VueLoaderPlugin 這個外掛，並新增了一個規則，使 webpack 碰到 .vue 結尾的檔案使用 vue-loader 編譯。這樣子就可以引入預設的 vue 而不是 vue/dist/vue.esm-bundler.js 了。
那麼還有一個問題，這裡 vue-loader 設定的規則是預編譯 .vue 檔案，所以應該做些改變，通過 vue 的單檔案元件文件對原來的程式碼做些修改

新增檔案 ./src/App.vue

<template>
<div>
 {{ message }}
</div>
</template>
<script>
export default {
data() {
 return {
   message: "Hello World!"
 }
}
}
</script>

修改 ./src/index.js

import {createApp} from 'vue'
import App from './App.vue'
const app = createApp(App).mount('#app')

執行命令
```
webpack serve
```
開啟瀏覽器訪問 localhost:8080 看到
```
Hello World!
```
成功

至此，我成功使用了 vue + webpack 搭建了自己的前端開發的起點。

青銅II 我來了

本作品採用《CC 協議》，轉載必須註明作者和本文連結

Vue 之青銅 I 晉級 [預先編譯]

有啥問題？

開始

相關文章