# Vue.js ESMoudle v.s 整包載入

---

## ✐ 一般：
- 整包載入
- 常用 **global** 的 cdn
## ✐ ESModule：
:::info
vuecli也是使用 ESM
:::
- 優點: 比較容易知道套件是從哪裡來
- 注意: vue2 沒有ESM ❌
- 單一模組
- 是分別獨立的一個一個方法，ex：createApp、ref、reactive
- 檔案的最大特點 **esm** 命名

### ➤ 使用 ESM 固定手法
- [CDN](https://cdnjs.com/libraries/vue)

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

- <font color="red">script標籤要加上 **`type="module"` （一定要加）**</font>
- <font color="red">`imoport { createApp } from 'url';`</font>
**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>

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

###### tags: `Vue3`
{%hackmd @unayojanni/H1Qq0uKkK %}