轻松掌握Vue.js中 import、export模块用法

一 Vue.js模块化概述

Vue.js使用了ES6模块机制中的import和export关键词来导入导出模块，模块化的目的是一是隐藏代码实现细节，让不同来源的代码块，可以组成要程序；二是避免代码块重写其他代码块的变量或函数，防止污染数据。

注意，在Node 13之前，Node环境下的JavaScript使用全局exports对象进行导入导出，为倡导JavaScript的模块机制，Node 13之后开始支持ES6的模块，本文只讨论ES6的模块机制的用法。

构建一个Vue.js脚手架项目用于示例，在项目src源代码文件夹内，新建一个export的文件夹，并创建一个index.js，用于导出数据，使用App.vue来导入数据。

二 export 导出用法

2.1 常规导出

如果想从模块导出常量、变量、函数或类，只要在声明前加上export关键字即可。

示例 //index.js

 // 导出常量
 export const Num = 100;
 
 // 导出字符串变量      
 export let str = 'Hello World!'
 
 // 导出数组
 export let arr = [1, 3, 5, 7, 9]
 
 //导出对象
 
 export let obj = {
     name: '张三',
     age: 20,
     say() {
         alert(this.name)
     }
 }
 
 // 导出函数
 export function add(a,b){
     return a+b
 }
复制代码

也可以不加关键词export，先正常定义常量、变量等，然后在只用一个export导出需要的值，上诉代码也等同于下面这行代码：

 // 定义常量 const Num = 100;  // 定义字符串变量       let str = 'Hello World!'  // 定义数组 let arr = [1,