ES6的模块化导入导出

1.js文件：export default方式导出

function A() {
    console.log("1.js---A方法")   
}

function B() {
    console.log("1.js---B方法")   
}

function Test() {
    console.log("1.js---Test方法")   
}
export default{
    A, //等价于A:A
    B,
    Test
}

// 这种export default的导入的时候用法：import obj from "./1.js" (导出1.js文件中的A,B,Test方法，注意：obj这个名字谁便取)

2.js文件  export 方式导出

function C() {
    console.log("2.js---C方法")
}

function D() {
    console.log("2.js---D方法")
}

function Test() {
    console.log("2.js---Test方法")
}
export {
    C, //等价于C:C
    D,
    Test
}

// 这种export 的导入的时候用法：import {C} from "./2.js" (导出2.js文件中的E方法，注意：名称不能改变，必须是C)
// 这种export 的导入的时候用法：import {C,D,Test} from "./2.js" (导出2.js文件中的E和F方法，注意：名称不能改变，必须是C,D,Test)
// 这种export 的导入的时候用法：import {C,D} from "./2.js" (导出2.js文件中的C和D和Test方法，注意：名称不能改变，必须是C,D,Test)

// 这种export 的导入的时候用法：import * as myfun from "./2.js" (导出2.js文件中的所有方法，注意：* as myfun 取别名 然后用的时候就这样用： myfun.C,myfun.D,myfun.Test )

3.js文件：方法前加export

export function E() {
    console.log("3.js---E方法")   
}

export function F() {
    console.log("3.js---F方法")   
}

export function Test() {
    console.log("3.js---Test方法")   
}

//在方法前面加export相当于如下代码：
// export {
//     E, 
//     F,
//     Test
// }
// 这种单个方法前面加export 的导出在使用导入的时候的用法：import {E,F,Test} from "./3.js"

4.js文件

function H() {
    console.log("4.js---H方法")   
}

function M() {
    console.log("4.js---M方法")   
}

function Z(){
    console.log("4.js---Z方法")   
}

//对H,M方法使用 export 导出方式
export {
    H,
    M,
}
//export default Z //单独导出一个Z方法，导入：import myz,{H,M} from "./4.js"  此时这个myz就是Z方法：直接执行myz()
export default
{
    Z
}

//在对4.js进行导入的时候就这样导入：import myz,{H,M} from "./4.js"   :注意这个Z是可以取别名的就myz都可以用的时候myz.Z()，但是H,与M别能取别名，必须是H,M且要放在{}里 

使用

<template>
  <div></div>
</template>
<script>
import obj from "./1.js"  //导入1.js中的向外导出的所有方法。

import { C, D, Test } from "./2.js"
import * as myfun from "./2.js" //导入2.js中的向外导出的所有方法。

import { E, F, Test as Test3 } from "./3.js" //因为3.js中的Test方法与2.js中的Test方法重名，所以这里需要给Test方法取一个别名

import myz, { H, M } from "./4.js"

// 1.js中的方法
obj.A();
obj.B();
obj.Test();

//2.js中的方法
C();
D();
Test();

myfun.C();
myfun.D();
myfun.Test();

//3.js中的方法
E();
F();
Test3();

//4.js中的方法
H();
M();
myz.Z();

</script>