Vue export import 导入导出的多种方式与区别

时间 2020-02-13

标签 vue export import 导入导出多种方式区别繁體版

原文原文链接

在使用vue导出时会有一个default关键字，下面举例说明下在导出时使用export和export default的对应的imort写法的区别javascript

1、部分导出和部分导入

部分导出和部分导入的优点，当资源比较大时建使用部分导出，这样一来使用者能够使用部分导入来减小资源体积，好比element-ui官方的就推荐使用部分导入来减小项目体积，由于element-ui是一个十分庞大的框架，若是咱们只用到其中的一部分组件，那么只将用到的组件导入就能够了。vue

1.1部分导出的写法java

export function helloWorld(){
    conselo.log("Hello World");
}
export function test(){
    conselo.log("this's test function");
}
复制代码

另外一种写法，这种方法比较不推荐，由于看起来会比较乱。element-ui

var helloWorld=function(){
    conselo.log("Hello World");
}
var test=function(){
    conselo.log("this's test function");
}
export helloWorld
export test
复制代码

1.2部分导入框架

只导入须要的资源ui

import {helloWorld} from "./utils.js" //只导入utils.js中的helloWorld方法
helloWorld(); //执行utils.js中的helloWorld方法
复制代码

1.3部分导出——所有导入this

若是咱们须要utils.js中的所有资源则能够所有导入spa

import * as utils from "./utils.js" //导入所有的资源，utils为别名，在调用时使用
utils.helloWorld(); //执行utils.js中的helloWorld方法
utils.test(); //执行utils.js中的test方法
复制代码

2、所有导出和所有导入

若是使用所有导出，那么使用者在导入时则必须所有导入，推荐在写方法库时使用部分导出，从而将所有导入或者部分导入的权力留给使用者。code

2.1所有导出ip

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

var helloWorld=function(){
    conselo.log("Hello World");
}
var test=function(){
    conselo.log("this's test function");
}
export default{
    helloWorld,
    test
} 
复制代码

2.2所有导入

import utils from "./utils.js"
utils.helloWorld();
utils.test();
复制代码