模块导出导入

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 下面也可以 更优雅
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };

//导出函数
function v1() { ... }
function v2() { ... }

export {
  v1 , 
  v2 as streamV2, //起别名
  v2 as streamLatestVersion
};

// 错误写法
var m = 1;
export m;

 

import命令具有提升效果，会提升到整个模块的头部，首先执行。
如果多次重复执行同一句import语句，那么只会执行一次，而不会执行多次。
.js后缀可以省略。如果只是模块名，不带有路径，那么必须有配置文件，告诉 JavaScript 引擎该模块的位置。
import { firstName, lastName, year } from './profile.js';

export default

也就是说 export default XX ，XX就是导出的内容。

//a.js
let sex = "boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。

 

正是因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。
var a = 1;
export default a;

function foo() {
  console.log('foo');
}
export default foo;

const router = new VueRouter({
  ...
});
export default router;


export default {
  name:'',
  data() {
    return {
      
    }
  },
  ...
}

//错误写法
export default var a = 1;

 

 

// MyClass.js
export default class { ... }

// main.js
import MyClass from 'MyClass';
let o = new MyClass();

 

使用export default时，对应的import语句不需要使用大括号。

混合导入

//utils.js
export default class { ... }

export function fn(obj, iterator, context) {
   ···
}
let a=10
export {a}

//混合导入
import MyClass ,{fn,a} from ./utils.js