export、export default 和 import 区别以及用法

首先要知道export，import ，export default是什么
ES6模块主要有两个功能：export和import
export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
用export命令定义了模块的对外接口，其他JS文件可通过import命令加载这个模块。
一句话：export和import（一个导出一个导入）
举例说明：
一个a.js文件有如下代码：

export var name="李四";

在其它文件里引用如下：

import { name } from "/.a.js" //路径根据你的实际情况填写
export default {
  data () {
    return { }
  },
  created:function(){
    alert(name)//可以弹出来“李四”
  }
 }

如果导出的是个函数：

function add(x,y){
   alert(x*y)
  //  想一想如果这里是个返回值比如： return x-y，下边的函数怎么引用
}
export { add }

如果是导出多个变量：

var name1="李四";  var name2="张三";  export { name1 ,name2 }

引用import方法相同。

export与export default比较

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可在其它文件或模块中用import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3、在一个文件或模块中，export、import可以有多个，export default仅有一个
4、通过export方式导出，在导入时要加{ }，export default则不需要

举例：

var name="李四";
export { name }
//import { name } from "/.a.js" 
可以写成：
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号

再举例：

1.export
//a.js
export const str = "blablabla~";
export function log(sth) { 
  return sth;
}
对应的导入方式：

//b.js
import { str, log } from 'a'; //也可以分开写两次，导入的时候带花括号

2.export default
//a.js
const str = "blablabla~";
export default str;
对应的导入方式：

//b.js
import str from 'a'; //导入的时候没有花括号