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里面最简单的代码：

      

export var a = 'my name is xiaoming';

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

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

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

其中{}是必定要有的 

　export多个文件

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

　　而后import

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

　若是不想暴露变量的名称：使用as能够重命名关键字

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

export default 的用法

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

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

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

要是多个变量

var a='my name is xiaoming',b='this is a bird';
export default {
　　a,b
};

在须要使用的js中

import anyoneword from '../../export/a.js'
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。