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。