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

開始

1. 安裝 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 同理。

2. 配置 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 的單檔案元件文件 對原來的程式碼做些修改

3. 新增檔案 ./src/App.vue

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

4. 修改 ./src/index.js

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

5. 執行命令

   webpack serve

   開啟瀏覽器訪問 localhost:8080 看到

   Hello World!

   成功

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

青銅II 我來了

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