开发者学堂课程【前端自动化构建工具 Webpack：export default 和 export 的使用方式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/587/detail/8231
export default 和 export 的使用方式
基本内容
一、export default 的使用
二、7点注意事项
三、ES6
四、Node
一、export default 的使用
在 main 里面通过导入 login 组件调用了 render 函数把 login 放在容器中展示出来。
l login.vue
<template>
在这个 template 里面，如果想要使用 method，那么直接可以根据msg来使用；
<div>
<h3>这是登陆组件,使用vue.文件定义出来的-{ {msg}</h3>
问：这个组件能不能有自己的数据？
答：在网页中，每个组件都有对应的method。
</div>
</ template>
那么在vue.文件中怎样定义 method?
使用如下程序方法进行修改。
l 范例1:
1、创建一个 show 对象（定义data和methods，通过export和default）
< script>
export default {
data() { //注意:组件中的data必须是function
return {
msg: "123"
};
} ;
methods: (
show() {
console . log ("调用了 login. vue 中的show 方法") ;
}
}
} ;
</ script>
在上述程序中创建了一个对象，但是此时需要除去 export default 。
在对象里面，存在一个 data 的 function，在里面添加数据；methods 里面添加方法，
如果想要定义 data 和 methods，就会使用 export default 来定义对象。
上述程序就是暴露成员的一种方式，暴露了一个 data 和一个 methods 的属性
<style>
</style>
l 范例2:
var info = {
name :"zs",
age: 20
}
v 不管这个变量叫什么，只要使用 export defaul 导出，那么就可以 自定义介绍这个名称，可以任意一个词语去自定义，只要符合变量定义规则。
l 范例3:
export default info //第一次暴露
export default {
address: '北京' //第二次暴露
}
v 编译报错：模块编译失败，语法错误 ；
v 注意：在一个模块中, 只允许 export default 向外暴露1次，不能有多次；
二、七点注意事项
介绍 export default，首先需要创建一个text.js文件夹
//以下这是Node中向外暴露成员的形式:
module . exports = { }
1. 注意: export default 向外暴露的成员,可以使用任意的变量来接收
2. 注意：在一个模块中,export default 只允许向外暴露1次
3. 注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员；
4. 注意:使用 export 向外暴露的成员的时候，只能使用{ }的形式来接收,这种形式叫做 [按需导出] ；
5. 注意: export可以向外暴露多个成员；同时，如果某些成员，我们在 import 的时候,不需要,则可以不在 { } 中定义；
6. 注意:使用 export 导出的成员,必须严格按照导出时候的名称,来使用 { } 按需接收 ;
7. 注意:使用 export 导出的成员，如果就想换个名称来接收,可以使用 as 来起别名；
三、ES6
l 在ES6中,也通过规范的形式规定了在ES6中如何导入和导出模块 。
(1) 在ES6中导入： 在ES6中导入模块, 使用 import模块名称from '模块标识符' 。
import '表示路径’ 。
(2) 在ES6中导出：在ES6中使用export default 和export 向外暴露成员 。
l 范例1:
export default {
name : ‘zs’,
age :20
}
导入一个 test 模块，检测让它暴露对象：
import m1 from ‘./test.js’
console.log(m1)
检查是否输出 obiect ;
v export default 来暴露成员可以用 import 和 from 和一个变量来接收。
v 这个变量(m1)，是任意书写的，则上下两个变量必须一致。
v 注意: export default 向外暴露的成员,可以使用任意的变量来接收 。
l 范例2 :
export var title = ‘小星星‘
(1) 注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员。
(2) export default info //第一次暴露 此时暴露通过“m222”来暴露
(3) 接收 title：
import m222, { title } from ' . . /test.js'
console. log (m222)
console.log(title)
v 使用 export 向外暴露的成员的时候，只能使用{ }的形式来接收,这种形式叫做 [ 按需导出 ]；
v 没有强制规定说明要导出几个就必须要接收几个；
l 范例3:
export var title = ‘小星星‘
export var title = ‘哈哈哈‘
import m222, { title ，content } from ' . . /test.js'
console. log (m222)
console.log(title + ‘---‘ +content )
v 暴露的成员必须按照名称来接受。注意:使用 export 导出的成员,必须严格按照导出时候的名称,来使用 { } 按需接收 ;
v 注意: export 可以向外暴露多个成员；同时，如果某些成员，我们在import 的时候,不需要,则可以不在 { } 中定义；
l 范例4:
如果导出的是 title，但是不想用 tittle来接收，想要用 title123来接收，可以使用以下方法来接收；
import m222, { title as title123，content } from ' . . /test.js'
console. log (m222)
console.log(title + ‘---‘ +content )
v 注意:使用export导出的成员，如果就想换个名称来接收,可以使用as来起别名；
四、Node
//这是Node中向外暴露成员的形式:
module . exports = { }
l 在 Node 中，使用 var 名称= require ( '模块标识符' ) 导入成员；
l module . exports 和 exports 来暴露成员
l 注意：不能使用 Node 中的 module . exports 暴露成员，而用 ES6 中的 import导入成员；必须统一使用，不允许 ES6 和 Node 混用；
