首先，建议仔细看看es6 入门的 module 语法。

我想说说相对重要的点：

每个 js 文件相互独立，是一个单独的module，输出用export，输入是import
export导出的是变量
export default导出的是一个具体的值
export var a=1相当于var a=1;export { a }
export default 1相当于var a=1;export { a as default}，一个module只能有一个default
export和import只能出现在顶级作用域
用as可以重命名变量
import的变量会变量提升，也就是不管写在哪，总会最先被解析
import {a,b} from './a'，export出去的结构是{a,b}，所以相应的import用的也是{a,b}
import a from './a'，export default导出的是一个值，import的时候可以将值赋值给任意一个变量，a/b/c等都行
import * as all from './a'，将 a 里面所有的 export 都拿到，因为export {a}，所以这里的 all 就是{a}，且因为export default也是一种export，所以 all 实质上是{a,default}
import来的变量，因为是别人家的变量，所以只能读，不能写
export {a} from './a'这句相当于import {a} from './a';export {a}

`export`导出的是变量

export导出的是变量，我个人觉得一旦理解这句，基本都不太会混淆使用了

这句怎么理解呢，举个例子

// a.js
var a = 1;
setInterval(() => {
  a++;
}, 500);
export { a };

// b.js
import { a } from "./a";
// a会跟随a文件的变化
setInterval(() => {
  console.log(a);
}, 500);

因为 a 是 a 文件的变量，当 a 的值变化的时候，b 文件的 a 同样变化了，因为 export 出的是一个变量 a,而不是写死的 a 的值

因为export导出的是变量

所以可以有以下写法

export var a = 1;
export function fn() {}
// 或者
export { a, fn };
// 如果想多次导出一个变量，可以将变量重命名，相同名字的只能有一个哈
export { a as a1, a as a2 };

所以不能以下写法

export 1
var a = 1
// 这句相当于 export 1
export a

`export default`导出的是值

这句怎么理解呢，举个类似上面的例子

// a.js
var a = 1;
setInterval(() => {
  a++;
}, 500);
export default a;

// b.js
// 没有{},就是export default的值，这里可以将值赋值给任意变量，不一定非得a
import a from "./a";
// a不会随着a文件而变化
setInterval(() => {
  console.log(a);
}, 500);

因为export default出去的是一个具体的值，一个写死的值，这里就是 1，管他 a 文件后来怎么样呢

因为export default导出的是变量

所以可以有以下写法

export default 1;
export default function fn() {}
// 或者
var a = 1;
export default a;
// 或者
var a = 1;
export { a as default };

所以不能以下写法

export var a = 1;

import 有没有`{}`的区别

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

// a.js
var a = 1;
var b = 2;
export { a };
export default b;

// b.js

import { a } from "./a";
import b from "./a";
import * as all from "./a";
// 可以看看这里的all，{a:1,default:2}，加深对default的理解
console.log(all);
// 注意，这里的b其实是相当于 在这里var b= 2，是b文件自己的变量，可以随意赋值
b = 1;
// a是a文件的变量，不可修改，只能a文件自己改，以下这句会报错
a = 333;

`export from` 什么时候用

我说个应用场景，读者可以举一反三~

项目里请求的接口很多，放在一个文件里太长，也难以维护，一般会以功能模块划分。

现在有个api的文件夹，index.js是将所有的接口转出去，还有project.js task.js。

// project.js
export const add = () => axios.post(...)
export const remove = () => axios.post(...)

// task.js
export const add = () => axios.post(...)
export const remove = () => axios.post(...)

// index.js
export * as project from 'project';
export * as task from 'task';

// 在组件使用的时候
import api from './api'
api.project.add()

// 当然一般为了方便使用会在main.js那边将其挂载在全局
// main.js
import api from './api'
Vue.prototype.$api = api
// 组件使用的时候
this.$api.project.add()

import()

es2020 的提案，import('./a')可以在需要的时候加载某个模块，比如点击按钮的时候加载等等，一种懒加载的机制。
webpack 已经实现了，所以在vue-router里可以使用这样懒加载一个页面。

{
  path: "/m",
  name: "m",
  component: () => import(/* webpackChunkName: "m" */ "../views/M.vue")
}