Vue中import引入方式详解及export 和 export default的区别

本文链接：https://blog.youkuaiyun.com/TurtleOrange/article/details/120032775

本文详细介绍了Vue中如何使用import导入第三方库、工具类和CSS文件，以及组件的注册。同时，对比了export和export default的区别，前者允许按需导入多个函数，后者则用于导出单一默认对象。通过实例展示了在Vue项目中如何调用这些导入的方法。

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

Vue中import引入方式详解及export 和 export default的区别

1.引入第三方插件

import echarts from ‘echarts’
import axios from ‘axios’
import ElementPlus from “element-plus”;

2.引入工具类

一、引入单个
import { isNonNegative } from ‘./filters’;
export导出：
export function isNonNegative (str) { … }

二、引入多个
import * as echarts from ‘echarts’
其中echarts.js中有多个export方法, 把echarts里所有export的方法导入

在Vue中使用：
Vue.prototype.$ echarts = echarts
直接用 this.$echarts .method调用就可以了，例如 this. $echarts.init()

3.导入css文件

一、在main.js中引入
import “element-plus/lib/theme-chalk/index.css”;

二、在.vue文件中，要在style标签引入
< style>@import ‘./style.css’;</ style>

4.导入组件

import Common from ‘./common’
components:{ common }

5.export 和 export default的区别

一、export使用
import { isNonNegative } from ‘./filters’;
import { isNonNegative, isNonNegativeInteger } from ‘./filters’;
export { isNonNegative, isNonNegativeInteger }
//需要加花括号可以一次导入多个也可以一次导入一个，但都要加括号
调用：isNonNegative（value）

二、export default使用
import filters from ‘./filters’;
export default { isNonNegative, isNonNegativeInteger }
//不需要加花括号只能一个一个导入
调用：filters.isNonNegative（value）