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 { isProgrammer }  from  "./filter"

export 导出：

export  function isProgrammer (val) { ... }

  二、引入多个

import * as echarts from "echarts"

其中echarts.js中有多个export方法，把echarts中所有的方法export导入

在vue中使用：

Vue.prototype.$echarts=echarts

直接用this.$echarts.method调用就可以了，比如 this.$echarts.initData（）

         3.export和export default的区别

一、export使用

import { isProgrammer }  from  "./filter"

import { isProgrammer，isProgrammersType}  from  "./filter"

export { isProgrammer，isProgrammersType }

//需要加花括号 可以一次导入多个也可以一次导入一个，但都要加括号

调用：isProgrammer（val）

 二、export default的使用

import filters  from  "./filter"

export { isProgrammer，isProgrammersType }

//不需要加花括号，需要一个一个的导入

调用 filters.isProgrammer（val）