新手学习VUE的时候会遇到很多的难题，今天要说的就是export和import这两个常用的关键字。
我刚开始看到这两个东西的时候也不知所云，那么今天就把我学习是VUE的时候学习export和import的笔记分享给大家：
export和import 说明：
export和import 本是ES6中的两个语法点，其作用就是字面意思，导入导出，但是为何要用他们做导入导出你看完下面的知识点你就明白 。
1、ES6中的export 和 import
ES6中的export 和 import一般有两种用法
1)、命名导出：(Named exports)
就是每一个需要导出的数据类型都需要有一个name,统一引入一定要带有｛｝，即便只有一个需要导出的数据类型，这种写法清爽直接，是推荐的写法
举例：

//------ lib.js ------
 const sqrt =Math.sqrt;
 function square(x){
 return x*x;
 }
 function diag(x, y) {
 return sqrt(square(x) + square(y));
 }
 expor{sqrt,square,diag}


在main.js中引入

------------main.js-----------------
 import {square,diag} from ‘lib’;

如果是把export 直接加入到声明前面就可以省略{}

//------ lib.js ------
 export const sqrt=Math.sqrt;
 export function square(x) {
 return x * x;
 }
 export function diag(x, y) {
 return sqrt(square(x) + square(y));
 }


导入

//------ main.js ------
 import { square, diag } from ‘lib’; 
 console.log(square(11)); // 121
 console.log(diag(4, 3)); // 5


无论怎么导出的，导入都需要加｛｝

2、别名引入(Aliasing named imports)
当从不同的文件引入的变量名相同的时候，就需要引入别名

import {speak} from ‘./cow.js’
 import {speak} from ‘./goat.js’


这样的写法是会引发歧义的。这个时候需要用到别名来对引入进行区分

import {speak as cowSpeak} from ‘./cow.js’
 import {speak as goatSpeak} from ‘./goat.js’


关键字是AS ，但是这样的操作也存在一定的弊端，当需要引入的文件很多的时候，这样的写法就会显得十分的 冗长繁琐。
解决办法：
这个时候就有命名空间横空出世了。。命名空间的引入：

（Namespace import）
 import * as cow from ‘./cow.js’
 import * as goat from ‘./goat.js’ 这样就省略掉了｛｝让代码更加简洁和大方
 cow.speak() // moo
 goat.speak() // baa


2)、默认导出：(Default exports)
默认的导出跟普通的导出最大的区别就在于，默认导出的时候不需要name这个属性了。 原本的导出是这样的exports {name1,name2} 现在的导出是这样的:

//------ myFunc.js ------
 export default function () { … };

导入：

//------ main1.js ------
 import myFunc from ‘myFunc’;
 myFunc();

但是：每一个js只能存在一个默认的export default

其实这种导出方式可以看成是命名的变种，只不过是把命名（name）.
虽然export default 只能有一个，但是也能导出多个方法
例子：

export default {
 speak(){
 return “moo”;
 },
 eat (){
 return “cow eates”;
 }
 drink(){
 return “cow drinks”;
 }
 }


引入:

import cow from “./default-cow.js”
 import goat from ‘./default-goat.js’
 cow.speak() // moo
 goat.speak() // baa

如果我们在编写模块的时候使用的导出方法不统一，那么引入的时候就需要考虑不同模块引入的方式，
编写两种引入方式通用的模块

import * as myself from ‘./ambidextrous-cow.js’ // import this file into itself
// this module’s own namespace is its default export
 export default myselfexport function speak () {
 console.log(‘moo’)
 }


这个 时候引入就不需要考虑引入的方式了：

import cow from ‘./ambidextrous-cow’
 import * as alsocow from ‘./ambidextrous-cow’cow.speak() // moo
 alsocow.speak() // moo


两种引入方法均可。
这种方法也有一个小缺点，就是在我们编写的模块中，有一个function是常用的，我们想默认导出，可export default已经使用了，而我们知道export default在一个模块中只能使用一次。这时就要使用Object.assign

import * as myself from ‘./ambidextrous-cow.js’
export default Object.assign(speak, myself)
export function speak () {
 console.log(‘moo’)
 }

但是需要 注意的是，Object.assign 只能用于function

import cow from ‘./ambidextrous-cow’
 import * as alsocow from ‘./ambidextrous-cow’cow() // moo
 cow.speak() // moo
 alsocow.speak() // moo