export export default的用法和区别 importES6使用 export 和 import 来导出、

ES6使用 export 和 import 来导出、导入模块，也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。使用export default命令，为模块指定默认输出。

变量的导入，导出

//api.js  导出
var age= 13
var name = '小红'
export {age,name}// 使用export导入
export default age// 使用export default导入

//vue组件中导入
import { age,name } from "/.api.js" //使用export导入
import  age from "/.api.js" // export default导入
export default {
  data () {
    return { }
  },
  created:function(){
  console.log(name)//输出来“小红”
 console.log(age)//输出来“13”
  }
 }

函数的导入导出

 
function add(x,y){
   console.log(x+y)
}
export { add }//使用export
export default add// 使用export default

import { add } from "/.api.js" //使用export
import  add from "/.api.js" // export default
export default {
  data () {
    return { }
  },
  created:function(){
   add(4,6) //输出来10
  }
 }

总结： 1. export与export default均可用于导出常量、函数、文件、模块等. 2. 在一个文件或模块中，export、import可以有多个，export default仅有一个. 3. 通过export方式导出，在导入时要加{ }，export default则不需要.

import * as subview from '../xx/xx.js' 表示subview 代替了*
import {a,b,c,d as hubb} from './yy.js' hubb 代替了d

import 的用法

1 引入第三方插件
import elementUI from 'elementui'
2导入css文件
import 'xx/xx/xx/xx.css'
如果是在.vue文件中那么在外面在套个style
<style>
 @import './test.css'
</style>
import name1 from './name1'
import name2 from './name2'
  components:{
     name1,
     name2,
  },
  
  
  第一种是引入单个方法
 
import {axiosfetch} from './util';
 
下面是写法，需要export导出
export function axiosfetch(options) {
 
} 
第二种  导入成组的方法
 
import * as tools from './libs/tools'
 
其中tools.js中有多个export方法,把tools里所有export的方法导入
 
vue中怎么用呢？
Vue.prototype.$tools = tools
直接用 this.$tools.method调用就可以了

4．import '@…'的语句
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

1、使用export抛出的变量需要用{}进行import

//a.js
export const str = "blablabla~";
export function log(sth) {
      return sth;
    }
 
对应的导入方式：
 
//b.js
import { str, log as _log } from 'a'; //也可以分开写两次，导入的时候带花括号。还可以用as重命名

2、使用export default抛出的变量，只需要自己起一个名字就行：

//a.js :
var obj = { name: ‘example’ }; 
export default obj; 
 
//b.js: 
import newNname from ‘./a.js’;   //newNname 是自己随便取的名字，这里可以随便命名
console.log(newNname .name);       // example;
总结

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

三，部分导入和部分导出，全部导入和全部导出
一、部分导出和部分导入
部分导出和部分导入的优势，当资源比较大时建使用部分导出，这样一来使用者可以使用部分导入来减少资源体积，比如element-ui官方的就推荐使用部分导入来减少项目体积，因为element-ui是一个十分庞大的框架，如果我们只用到其中的一部分组件，那么只将用到的组件导入就可以了。

//部分导出
//A.js
export function helloWorld(){
 conselo.log("Hello World");
}
export function test(){
 conselo.log("this's test function");
}
 
//部分导入
//B.js
import {helloWorld} from "./A.js" //只导入A.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法

如果我们需要A.js中的全部资源,则可以全部导入，如下：

import * as _A from "./A.js" //导入全部的资源，_A为别名，在调用时使用
_A.helloWorld(); //执行A.js中的helloWorld方法
_A.test(); //执行A.js中的test方法

二、全部导出和全部导入如果使用全部导出，那么使用者在导入时则必须全部导入，推荐在写方法库时使用部分导出，从而将全部导入或者部分导入的权力留给使用者。

需要注意的是:一个js文件中可以有多个export，但只能有一个export default

//全部导出  A.js
var helloWorld=function(){
 conselo.log("Hello World");
}
var test=function(){
 conselo.log("this's test function");
}
export default{
 helloWorld,
 test
}
 
//全部导入  B.js
import A from "./A.js"
A.helloWorld();
A.test();