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

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）