VUE中常用的几种import（模块、文件）引入方式

最新推荐文章于 2024-09-01 16:09:02 发布

半夏遮流年シ

最新推荐文章于 2024-09-01 16:09:02 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_42671417/article/details/112302936

本文介绍了JavaScript中模块化的实现方式，包括使用`import`和`export`关键字进行单个或多个方法的导入导出，以及使用`export default`导出默认方法。还讲解了如何在Vue中注册并使用工具类，以及`@import`在样式文件中的应用和组件的导入。此外，文章对比了`export`和`export default`的区别，并提供了导入CSS文件和组件的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（1）引入第三方插件

代码如下：


import echarts from 'echarts'

（2）引入工具类

1.第一种是引入单个方法

代码如下：

导入：

import {axiosfetch}  from  './util';

需要export导出:


export function axiosfetch(option){


}

2. 第二种导入成组的方法

代码如下

import * as tools from './libs/tools'

其中tools.js 中有多个export方法,把tools里所有export的方法导入

vue 中怎么用呢？

代码如下：

vue.prototype.$tools = tools

直接用this.$tools.metchod 调用就可以了

（3）说到export 和export default 又有什么区别呢？

1. 先看export

代码如下

import  {axiosfetch}  from './util';

//需要加花括号,可以一次导入多个也可以一次导入一个,到时要加括号


如果是两个方法

代码如下：

import {axiosfetch,post}  from  './util';

2. 再是export default

代码如下:

import axiosfetch  from  './util';  //不需要加花括号,只能一个一个导入

(4)导入css文件

import 'ibiew/dist/style/iview.css';

如果是在.vue 文件中那么在外面套个style

代码如下：
<style>
@import  './test.css';
</style>

(5)导入组件

代码如下:

import name1 from './name1'

import name2 from  './name2'


components:{

name1,
name2,

}