vue项目中的导出以及引入的使用

vue项目中的导出的方式通常是通过ES6的export和export default语法

export：导出多个实体，并且可以在导入时为它们指定不同的名称（别名）。

export default：（默认导出）导出一个默认的实体，这样在导入时不需要使用大括号，并且可以随意命名，但每个模块只能有一个默认导出。

下面以在.js文件中的导出进行讲解

多导出

export导出：（在导出的时候可以通过as来自定义导出的名称）

// myModule.js
function sayHello() {
  console.log('Hello!');
}

function sayGoodbye() {
  console.log('Goodbye!');
}

export { sayHello as helloFunction, sayGoodbye as goodbyeFunction }; // 自定义导出的名称

引入： （这里引入的名称必须和导出的名称一致）

import { helloFunction, goodbyeFunction } from './myModule.js';

默认导出（单导出）

export default导出：（使用export default的导出的名称不能使用as进行重命名）

// myModule.js    
function sayHello() {
  console.log('Hello!');
}

export default sayHello; // 将 sayHello 函数作为默认导出，并可以自定义名称

引入 ：（这里引入的时候将导出的sayHello改为了自定义的customName）

import customName from './myModule.js'; // 在这里将默认导出的 sayHello 函数命名为 customName

这两种导出在使用上的区别

用export导出和使用export default导出的一个区别就是如果是使用的export default导出的话，那么在引入的时候只要路径地址对了即可，在引入的时候我们可以将导出的文件名重新自定义；但是如果使用的export导出的话，那么我们在引入的时候不光要路径地址一致，这里使用的名字必须和导出的名一致