轻松掌握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, 3, 5, 7, 9]  // 定义对象  let obj = {     name: '张三',     age: 20,     say() {         alert(this.name)     } }  // 定义函数 function add(a, b) {     return a + b }  // 一句话导出多个数据 export { Num,str,arr,obj,add }复制代码

这里看起来好似用花括号导出了一个对象，实际上它是一个以逗号分割的标识符列表，不会定义对象字面量。

2.2 默认导出

一个模块中导出一个函数或类是导出的应用，在这里，我们要用到default关键字，即：

 // 定义函数
 function add(a, b) {
     return a + b
 }
 
 // 默认导出 例子1
 export default add
复制代码

与常规导出相比，两者的区别有两点：

1. 一个js模块中，有且只能有一个export default，但是，在一个js模块中，可以有多个export。export default用于只需导出一个值时使用，也是常见的用法。

2. 常规导出export的花括号中，只对有名字的声明有效，即花括号里的名字，必须欲声明；而默认导出export default则可以导出任何表达式，包括匿名函数或者匿名类，如果在export default 后面接花括号的话，说明导出的时一个实实在在的对象。

 // 导出对象
 export default {
     name: '张三',
     age: 20,
     say() {
         alert(this.name)
     }
 }
复制代码

// 导出匿名方法
 export default (a,b) => {
  return a + b
 }
复制代码

使用导出时，应当注意export关键字只能出现在JavaScript代码的顶层，不能在类、函数、代码块中导出值。

三 import 导入用法
-------------

ES6中，使用import关键字来进行导入。

### 3.1 导入常规导出 （多个值）

// 导出多个值
 const Num = 100;
 let str = ‘Hello World!’
 let arr = [1, 3, 5, 7, 9]
 let obj = {
  name: ‘张三’,
  age: 20,
  say() {
  alert(this.name)
  }
 }
 function add(a, b) {
  return a + b
 }
 export { Num,str,arr,obj,add }
复制代码

在App.vue文件中，用import来导入数据。

import {Num,str,arr,obj,add} from ‘./export/index.js’;
 console.log(Num,str,arr,obj);  // => 100 “Hello World!” (5) [1, 3, 5, 7, 9] {name: “张三”, age: 20, say: ƒ}
 console.log(add(4,5)); // => 9
复制代码

我们用import关键字，跟着一个花括号，花括号是导入的数据名列表，再跟着一个from关键字，最后的字符串是要导入模块的文件路径。

需要注意的时，import 花括号里的数据命名要和导出 export 花括号里的数据命名一致，可以全部导入，也可以部分导入。

### 3.2 利用别名\* as 导入多个值

在全部导入时，也可以利用\* as 别名的方式来轻松导入所有值,这是创建了一个core的对象，所有的导出值都会编程cord对象的一个属性，上述例子用别名接收：

import * as core from ‘./export/index.js’;
 console.log(core.Num,core.str,core.arr,core.obj); // => 100 “Hello World!” (5) [1, 3, 5, 7, 9] {name: “张三”, age: 20, say: ƒ}
 console.log(core.add(4,5));// => 9
复制代码

### 3.3 导入默认导出的模块 （一个值）

export default 默认导出的值，用以下一句话代码导入：

// 默认导出 一个函数
 function add (a,b) {
  return a + b
 }
 export default add
复制代码

 // 导入
 import add from './export/index.js';
 console.log(add(4,5)); // => 9
复制代码
```

这里用import关键字，跟着一个标识符，再跟着一个from关键字，最后的字符串是要导入模块的文件路径。标识符是一个自定义的一个常量，不必和导出的数据命名一致。所以上述导入代码中的add可以改成其他名字，如myAdd。

```
 import myAdd from './export/index.js';
复制代码
```

### 3.4 导入模块路径

import from后接的字符串，是相对于导入模块位置的路径。

> 模块标识符字符串必须是一个以“/”开头的绝对路径，或者是一个以“./”或“../”开头的相对路径，又或者是一个带有协议及主机名的完整URL。ES6规范不允许类似“util.js”的非限定模块标识符字符串，因为它存在歧义：它是当前模块同级目录下的一个模块呢，还是安装在特殊位置的某个系统模块呢？
> 
> 如果想从当前模块的同级目录导入模块，只需要在模块名前面加上“./”，也就是使用“./util.js”而非“util.js”。

我们可以在路径字符串中，用使用@来表示src根路径，避免写错相对路径。

### 3.5 Vue.js 项目导入应用场景

#### 3.5.1 导入插件

```
 import VueRouter from 'vue-router'
 import Axios from 'axios'
复制代码
```

这里from后面接的是插件文件夹名称，从node\_modules模块文件夹中查找同名文件夹，导入其内部的index.js。

#### 3.5.2 导入组件

```
 import HelloWorld from './components/HelloWorld.vue'
 import Header from './components/Header.vue'
 
 export default {
   name: 'app',
   components: {
     HelloWorld,
     Header
   }
 }
 </script>
复制代码
```

#### 3.5.3 导入 css文件

```
 // 导入elementui的css
 import 'element-ui/lib/theme-chalk/index.css';
复制代码

// 在vue单页面组件中的style标签里导入
 
复制代码

### 3.6 利用别名 as 解决导入时重命名

假如两个模块使用了相同的名字导出了两个不同的值，而我们需要同时导入这两个值，可以采用as 别名的方式，将其中一个或两个重命名，解决冲突。

import { add as indexAdd } from ‘./export/index.js’; //将add重命名
 import add from ‘./other/index.js’;
复制代码

四 import()函数
------------

前面我们讲到，export import 要在模块的顶层，不能再代码块中。如果我们需要按条件加载不同的模块时，下述代码中会报错。

// 报错
 if (login = true){
     import loginFun from ‘./loginFun.js’
 }
复制代码

ES2020引入了import()函数，2020年年初，所有支持ES6的模块的浏览器均支持了这一函数，它可以用再任何地方，不仅限于模块，非模块脚本也可以使用。

import()是运行时执行，即运行到这一句是便会加载指定的模块，上述代码就可以修改为：

// 报错
 if (login = true){
    import (‘./loginFun.js’).then(…)
 }
复制代码

在vue中，最常见应用在路由规则里，动态加载组件。

// 定义路由规则
 const routes = [{
  name: ‘index’,
  path: ‘/’,
  component: () => import(“@/pages/index”)
  },
  {
  name: ‘province’,
  path: ‘/province’,
  component: () => import(“@/pages/province”)
  },
  {
  name: ‘city’,
  path: ‘/city’,
  component: () => import(“@/pages/city”)
  },
  {
  name: ‘404’,
  path: ‘*’,
  component: () => import(“@/pages/404”)
  }
 ]
复制代码