es6中export、export default、import的理解

export 与 import 的使用

export 与import是es6中新增模块功能最主要的两个命令。我们要知道在es6中，实现了模块功能，而且相当简单，意在取代commonjs和AMD规范。成为一种模块化的通用解决方案。

其设计思想为尽量的静态化，我们可以理解为在加载之前就知道自己所需要依赖的是哪个文件，而非在运行的时候才知道依赖谁。es6的那模块不是对象，通过export输出指令，通过import输入。就目前来说 不用一些编译器的话 最新版的浏览器是不识别import这个关键字的

在es6模块中是自动采用严格模式的。具体条例我们可以参考阮一峰老师写的es6入门中的moule模块

最简单的使用：

　　我是在vue-cli脚手架中进行验证，因为其环境支持es6的语法

　　首先在src下面新建一个export文件夹 里面新建两个js 分别为a.js,b.js

　　

　　a.js里面最简单的代码：

1	export var a = 'my name is xiaoming';

　　然后一定要在hello模板中import该js，这里的路径是我自己配置的一些模板，新建的vue-cli中应该是hello模板

1 2	import {a} from '../../export/a.js'; console.log(a)

　　from后面的路径要写对 然后不能写到app.vue或者main.js中因为是入口文件 里面import都是各种依赖包

其中{}是一定要有的

　export多个文件

1 2	var a='my name is xiaoming',b='my name is xiaohong'; export {a,b}

　　然后import

1 2	import {a,b,} from '../../export/a.js'; console.log(a,b)

　如果不想暴露变量的名称：使用as可以重命名关键字

1 2	var a='my name is xiaoming',b='my name is xiaohong'; export {a as x, b as y}

export default 的用法

export 之后加上default意指默认接口的意思，在一个文件里面默认的只能有一个 其区别就是{} 在export中 引入需要用{}来盛放

1 2	var a='my name is xiaoming' export default a;

1	import a from '../../export/a.js';

要是多个变量

1 2	var a='my name is xiaoming',b='this is a bird'; export default {<br>　　a,b<br>};

在需要使用的js中

1	import anyoneword from '../../export/a.js'<br>console.log(anyoneword)//一个对象里面包含a,b两个变量。

是不是发现和vue组件很像。　

总结 其中export和export default最大的区别就是export不限变量数 可以一直写，而export default  只输出一次 而且 export出的变量想要使用必须使用{}来盛放，而export default 不需要 只要import任意一个名字来接收对象即可。　

export default可以跟在非匿名函数之前，也可以跟在匿名函数之前，同时也可以是一个对象之前。

import

import  '**' from 'vue'直接寻找的是依赖包里的文件

如果import '**' from './vue' 表示是同级文件下的js。