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时 自定义变量名称；