Vue.js ESMoudle v.s 整包載入

---

✐ 一般：

• 整包載入
• 常用 global 的 cdn

✐ ESModule：

vuecli也是使用 ESM

• 優點: 比較容易知道套件是從哪裡來
• 注意: vue2 沒有ESM ❌
• 單一模組
• 是分別獨立的一個一個方法，ex：createApp、ref、reactive
• 檔案的最大特點 esm 命名
  

➤ 使用 ESM 固定手法

• CDN
  ​​​​https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js
  

• script標籤要加上 type="module" （一定要加）
• imoport { createApp } from 'url';
  import { 哪一個模組} 對應到 vue cdn esm 路徑
  ​​​​<script type="module">
  ​​​​    imoport { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js';
  ​​​​    // import { 哪一個模組}  對應到 vue cdn esm 路徑
  
  ​​​​    Vue.createApp({
  ​​​​        data(){
  ​​​​            return{
  ​​​​                text:'我叫卡斯伯'
  ​​​​            }
  ​​​​        }
  ​​​​        methods: {
  ​​​​            // methods 方法
  ​​​​        }
  ​​​​        mounted(){
  ​​​​            // mounted 函式
  ​​​​        }
  ​​​​    }).mount('#app');
  ​​​​</script>
  

Vue.js ESMoudle 或 整包載入 擇一使用，不會同時使用兩種載入方法，建議使用 ESModule 的載入方法。

tags: Vue3

最後，親愛的大家！我需要你的大聲鼓勵 ٩(⚙ᴗ⚙)۶

如果覺得這篇文章對你有幫助，請給我個一個小小的鼓勵 ❤ 讓我知道，這會成為我寫下去很大的動力。
對了，我還有其他文章，如果有興趣也來逛逛吧！
(文章中如有覺得不妥之處、錯誤內容，也可以透過聯絡我，我會儘速改善，感謝！)

☞ YoJanni 珍妮 2021 正在設計轉職前端的路上，希望大家在學習的路上能夠一起成長
☞ 聯絡我