還不瞭解export & export default區別嗎？

vue模塊化機制

vue是通過 webpack 實現模塊化的前端框架，那什麼是 webpack ， webpack可以看成是模塊打包機，它的工作是：把你的項目當做一個整體，通過一個給定的文件(如 index.js)，webpack將從這個文件開始找到項目的所有依賴文件，並處理它們，打包成一個或多個瀏覽器可識別的JS文件。看一下webpack官網的圖片，意思大致就是：打包所有模塊依賴，生成靜態文件。

export 和 export default

一個模塊就是一個文件，一個模塊內部的變量，文件外部無法獲取，如果需要文件外部獲取到內部的變量，就需要將文件內的變量進行輸出，也就是 export，export可以用來輸出多個模塊，而且是可以命名的。

//demo1.js
const str = "Hello World!";
function f(a) {
    return a + 1;
}
export {
    str, f
}

//demo2.js
//引入 demo1.js 文件中的變量與方法
import { str, f } from 'demo1';

如果想爲輸入的變量重命名，需要使用 as 關鍵字對輸入的變量重命名。

//demo2.js
import { str as str1, f as fun } from 'demo1';

export default 也是用來導出模塊，可以在例如 vue 這種單組件文件的項目中使用，通常需要導出一個對象，以便在需要的地方 import

//demo1.js
export default {
    data() {
        return {
            str: "",
        }
    },
    methods: {
        printStr() {
            console.log(this.str);
        }
    }
}

//demo2.js
import demo1 from 'demo1';

export 與 export default 的區別是：

• export 可以導出多個有名字的模塊，import 的名稱必須與export 的模塊名稱相同 ； 而 export default 只可以導出一個默認的模塊，是匿名的。
• import export 模塊的時候，需要使用 { }， 而 import export default 模塊的時候，直接 import 即可。
• export default 命令輸出模塊時，一個模塊只能有一個輸出，因此 export default 只能使用一次，所以 import 時不需加 { }，因此只可能唯一import 默認輸出模塊。