Vue中 import的路徑有幾種？import 的出的變量是什么？export ,export default 差別是什么？

1，Vue 的單頁應用中我們經常見到如下寫法

//搜索本項目node_modules目錄 
 import Vuex from 'vuex'
//搜索項目根目錄
 import moduleA from '@/store/modules/moduleA'
//當前文件所在目錄下的store文件夾往下查找
 import moduleB from './store/modules/moduleB'

 

2，在編寫vue js模塊時，export 的方式，會導致import 時方式不一樣，我們可以在一個js中export多個變量（對象），也可以export一個默認變量

//test.js 文件
var test1 = {
    
     log:function(msg){
        console.log(msg)
    }
};

var test2 = {
    
     print:function(msg){
        console.log(msg)
    }
};


export  {test1};
export {test2};
export default {test1,test2}

上面有2種export 的方式，請注意export 時用{} 花括號把變量包圍起來，這樣在import 的時候我們可以這樣寫

//index.js
import {test1,test2} from '../../store/test' 
import testm from '../../store/test'

    export default {
        data() {
            return {
                title: 'Hello app'
            }
        },
        onLoad() {

            test1.log("**** 直接導出的test 1")
            testm.test1.log("#$$$通過default方式導出的test1")
            

        }
}

結論：通過 export 方式導出的變量 ，在import時需要使用 {} 花括號進行變量解構，而且變量名需要和原先export時嚴格相同,通過export default 導出的變量沒有變量名稱，可以import時 自定義變量名稱；