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

更新时间：2020年02月12日 13:50:40 作者：吕布的僚机

这篇文章主要介绍了Vue export import 导入导出的多种方式与区别介绍，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

一、部分导出和部分导入

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

1.1部分导出的写法

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

另一种写法，这种方法比较不推荐，因为看起来会比较乱。

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

1.2部分导入

只导入需要的资源

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

1.3部分导出——全部导入

如果我们需要utils.js中的全部资源则可以全部导入

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

二、全部导出和全部导入

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

2.1全部导出

需要注意的是:一个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();

总结

以上所述是小编给大家介绍的Vue export import 导入导出的多种方式与区别介绍，希望对大家有所帮助！

您可能感兴趣的文章:

vue-cli开发环境实现跨域请求的方法
本篇文章主要介绍了vue-cli开发环境实现跨域请求的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
vue-cli+webpack项目修改项目名称的方法
下面小编就为大家分享一篇vue-cli+webpack项目修改项目名称的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue3中element-plus Upload上传文件代码示例
这篇文章主要介绍了vue3中element-plus Upload上传文件的相关资料,在时间开发中上传文件是经常遇到的一个需求,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-08-08
vue实现抖音时间转盘
这篇文章主要为大家详细介绍了vue实现抖音时间转盘，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-09-09
Vue3+Vite项目使用less的实现步骤
最近学习在vite项目中配置less,本文主要介绍了Vue3+Vite项目使用less的实现步骤,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
2024-02-02
Vue响应式原理与虚拟DOM实现步骤详细讲解
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现
2023-03-03
解决vue-router 嵌套路由没反应的问题
这篇文章主要介绍了解决vue-router 嵌套路由没反应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue组件间传值的方法你知道几种
这篇文章主要为大家详细介绍了vue组件间传值的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
用vuex写了一个购物车H5页面的示例代码
本篇文章主要介绍了用vuex写了一个购物车H5页面的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
Vuex之module使用方法及场景说明
这篇文章主要介绍了Vuex之module使用方法及场景说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10