ES6中的模块化

模块化：将大的项目文件，拆成多个小的，然后再组合起来
好处：
1、不同模块里，相同命名不冲突
2、代码复用
3、高维护性
模块化的规范
es6中的命令
import (引入)
export （输出）

=======模块化输出语法汇总=====

<script type="module">
//用import 必须是type="module"类型
//import对应的文件需要是http的，可以使用live-server
//会出现跨域，可以使用chrome设置跨域处理
//引入a
import * as A from 'http://127.0.0.1:8080/a.js'
console.log(A.name) //张华1
//引入a2
import * as A2 from 'http://127.0.0.1:8080/a2.js'
console.log(A2.name) //张华2
//引入a3
import * as A3 from 'http://127.0.0.1:8080/a3.js'
console.log(A3.default.name) //张华3
</script> 

对应的s中的内容
a.js

image.png

a2.js

image.png
a3.js
image.png

=======模块化引入语法汇总=====
//1、用*引入（export 和 export default 都可以）

    import * as A from 'http://127.0.0.1:8080/a.js';
    // console.log(A)

//2、使用花括号

    import {name,smail} from 'http://127.0.0.1:8080/a2.js';
    // console.log(name,smail)
    //别名
    import {name as a1Name,smail as a1Smail} from 'http://127.0.0.1:8080/a.js';
    // console.log(a1Name,a1Smail)
    import {default as A3} from 'http://127.0.0.1:8080/a3.js';
    // console.log(A3)

//3、简写（只针对 export default）

    import A33 from 'http://127.0.0.1:8080/a3.js';
    console.log(A33)

=======针对vue项目模块化引入的思考=====
项目中index.js中

image.png

index.js相当于单页面应用的入口js文件，在默认引用index.js中 script标签设置的type 是 module