07-vue-cli-export 的使用

﹏ヽ暗。殇╰゛Y 2024-04-01 09:32 15阅读 0赞

## 一.概念 ##

ES6模块主要有两个功能：export和import

**导出**：export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口

**导入**：import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文 件）。这几个都是ES6的语法。

![2b481858ea5e83634be2b541bd7ebeea.png][]

在实际开发中，我们在项目开发自定义的工具类，java中很常见。在vue cli 中如果需要定义工具js文件，如何操 作

## 二、export 定义变量和函数 ##

1 在src目录下创建src/assets/js目录，创建test.js文件，源码如下：

/*  ES6语法，对这两个东西进行导出  */
    /*  添加函数  */
    export function add(){
      alert("我是加法");
    
    }
    
    /*  创建变量  */
    export var  hello = "你好";

2 在任意组件中引入test.js文件

> import \{对象名 \} from “目录名称/js文件名”

![5c4caa899563fa4bf8d3ac97e683dc34.png][]

3 调用定义的方法或者变量

![0c8be9f0700d5ea5bc2e95b1adc8c20b.png][]

4.结果

![6003b427a887717399e149f53cbd2a3d.png][]

![f404756cb2bb10cea53ecf5a594cc88a.png][]

## 三、export default 定义对象 ##

### 一个对象的方式引入 ###

1 在src/assets/js目录下创建目录，创建test01.js文件，js源码采用ES6方式定义对象和方法，

// 一个对象的方式，进行封装
    
    var count = {
        /*  定义add函数 */
        add:function(){
          alert("我是加法")
        },
        /*  定义变量  */
        hello:"你好"
    }
    
    /*  导出对象  */
    export default count

2 在.vue文件中引入工具类，语法：import 对象名 from “@/目录名称/js文件名”

![39dcce0f2aa378a2019f29129b8dac6a.png][]

3 使用工具类方法

![2bc8bc30920559e7706e5adf54440895.png][]

## 四、总结 ##

1、export default 向外暴露的成员，可以使用任意变量来接收

2、在一个模块中，export default 只允许向外暴露一次

3、在一个模块中，可以同时使用export default 和export 向外暴露成员

4、使用export向外暴露的成员，只能使用\{ \}的形式来接收，这种形式，叫做【按需导出】

5、export可以向外暴露多个成员，同时，如果某些成员，在import导入时，不需要，可以不在\{ \}中定义

6、使用export导出的成员，必须严格按照导出时候的名称，来使用\{ \}按需接收

[2b481858ea5e83634be2b541bd7ebeea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/6af8f883a83747ba87e82902d22dd0d3.png
[5c4caa899563fa4bf8d3ac97e683dc34.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/beeedf2cc7434c23866701d2e3dcbeeb.png
[0c8be9f0700d5ea5bc2e95b1adc8c20b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/87cee3d4d26f42c5b6a9a99613dc9640.png
[6003b427a887717399e149f53cbd2a3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4e57e5c239d04f4083c7077093970f4a.png
[f404756cb2bb10cea53ecf5a594cc88a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7b04d66a97b941a185f6fb8652d931c0.png
[39dcce0f2aa378a2019f29129b8dac6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/25d51a7347d340309e5f9dfb72b08e77.png
[2bc8bc30920559e7706e5adf54440895.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/696e7758fe11452ca6baccb8c05b2216.png