export、export default、import的用法和区别(包括封装$API接口步骤)

ES6模块主要有两个功能：export和import

export：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

import：用于在一个模块中加载另一个含有export接口的模块。

使用export命令定义了模块的对外接口以后，其他文件就可以通过import命令加载这个模块（文件）

export 和 export default

相同点：

export和export default均可用于导出常量，函数，文件，模块等。

不同点：

1.在一个文件或模块中，export、import可以有多个，但是export default仅有一个。

2.通过export方式导出，在导入时要加 {}，例如：import  {}  from  ../../（路径）。

3.通过 export default 方式导出，导入不加 {}

4.使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

注意：

1、export default 向外暴露的成员，可以使用任意变量来接收

2、在一个模块中，可以同时使用export default 和 export 向外暴露成员

3、在一个模块中，export default 只允许向外暴露一次

4、使用export向外暴露的成员，只能使用{ }的形式来接收，这种形式，叫做【按需导出】

5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在{ }中定义

6、使用export导出的成员，必须严格按照导出时候的名称，来使用{ }按需接收

7、使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名

举一个例子：

request.js文件

import axios from "axios";
const service = axios.create({
  baseURL: '',  // base url
  timeout: 5000, // request timeout
});
export default service;

api/product/attr.js文件------引入request.js文件

//export default 向外暴露的成员，可以使用任意变量来接收
import request from "@/utils/request";

export const reqCategory1List = () =>
  request({ 
      url: "/admin/product/getCategory1", 
      method: "get" 
  });

export const reqCategory2List = (category1Id) =>
  request({ 
      url: `/admin/product/getCategory2/${category1Id}`, 
      method: "get" 
  });

api/index.js文件-----引入attr.js文件

//使用export导出的成员，如果想换个变量名称接收，可以使用as来起别名
import * as attr from "@/api/product/attr";

export default {
  trademark,
  attr,
  spu,
  sku,
};

main.js文件-----引入api/index.js文件

import API from "@/api/index";
Vue.prototype.$API = API;

使用API的方法：

this.$API.attr.reqCategory1List()