Vue 之青銅 I ⭐⭐

_Daniel發表於2021-08-28
Vue
系列文章：
Vue 之青銅 I ⭐ Vue 之青銅 I ⭐⭐ Vue 之青銅 I ⭐⭐⭐ Vue 之青銅 I [晉級]

有啥問題？

緊接上篇，我已經知道如何在 index.js 列印出 Vue ，但是按照 Vue 文件我至少得掛載到一個 Html 的標籤上，總不能直接在 index.js 寫 <div id="man"></div> 這樣的程式碼吧。我最終的目的是想要得到一個直接訪問的 Url 地址或者是 index.html 這樣直觀的結果。怎麼辦呢？
運轉《有問題就百度》大法後，很幸運馬上就得到了一個使用 webpack 的結果。

為什麼用 webpack ？

沒有別的選擇，事實上這是最好的也是不得不選的選擇。

什麼是 webpack ？

我也不知道… 還是看官網咖。

看了幾分鐘文件，得到一個自己的通俗理解：webpack 就是用一種方式把 Javascript 程式碼 和 Css 程式碼整理整理，打包成一個 (多個) 檔案。

這樣打包好，我只要在 html 裡，寫個 <script src='...'></scirpt> 不就得到我想要的嗎。

怎麼用 webpack ？

粗略看了下，發現 webpack 主要的用法就是寫好一個配置檔案。先暫時這麼認為吧！

開始

  1. 建立一個目錄開始專案
    mkdir demo-webpack
cd demo-webpack
npm init -y
  2. 安裝 webpack
    npm install webpack webpack-cli --save-dev -g
  3. 新建檔案 ./src/index.js 並隨便寫點程式碼
    alert('Hello webpack!')
  4. 執行命令
    webpack
    因為 webpack 是一個開箱即用 (直接就可以用，因為有預設的配置值) 的工具。他預設使用 ./src/index.js 檔案，然後輸出生成的 ./dist/main.js 檔案
    可以看到最終目錄的檔案如下：
    dist
 main.js
src
 index.js
package.json
  5. 新建 index.html 寫入以下並儲存
    <html>
<body>
 <script src="./dist/main.js"></script>
</body>
</html>
  6. 在瀏覽器開啟 index.html 看到彈框，成功！

青銅I⭐ 晉級失敗
(你 webpack 關我 Vue 啥事 :anger:)

只能繼續寫了，應該也就是重複下 青銅I 的步驟吧….

webpack 和 Vue

  1. 安裝 Vue
    npm install vue@next
  2. 修改 ./src/index.js 和 index.html
    //index.js
import {createApp} from 'vue'
const app = createApp({
data () {
 return {
   message: 'Hello Vue And Webpack!'
 }
}
}).mount('#app')
    <!-- index.html -->
<html>
<body>
 <div id="app">{{ message }}</div>
 <script src="./dist/main.js"></script>
</body>
</html>

    參考自Vue文件《建立一個應用例項》

  3. 執行命令
    webpack
    額，毫無意外報錯了，以下是報錯的主要內容
    WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.51.1 compiled with 2 warnings in 699 ms
    點選報錯提示的連結，簡單看了下，我應該做的以下步驟可以解決這個報錯
    建立檔案 ./webpack.config.js 寫入以下內容並儲存
    module.exports = {
mode: 'development',
};
    然後再次執行命令
    webpack
    毫無意外沒有報錯，用瀏覽器開啟 index.html 成功看到頁面出現了
    {{ message }}
    (⊙﹏⊙) 不是應該被渲染成 Hello Vue And Webpack!嗎？
    還好在瀏覽器下面看到了這樣的警告資訊，避免了走其他彎路
    [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
    於是乎，修改 ./src/index.js 檔案
    //index.js
import {createApp} from 'vue/dist/vue.esm-bundler.js'
const app = createApp({
data () {
 return {
   message: 'Hello Vue And Webpack!'
 }
}
}).mount('#app')

青銅I⭐⭐ 我拿下了

總結：不要總是使用《有問題就百度》，很多時候解決方法就在報錯資訊上。

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

相關文章