VUE export import

在Vue.js项目中，export 和 import 是ES6（ECMAScript 2015）模块系统的一部分，用于在JavaScript文件中导出和导入模块（比如组件、函数、变量等）。这对于组织大型项目中的代码、提高代码的可复用性和可维护性非常重要。下面我将详细解释如何在Vue.js项目中使用export和import。

export

export 关键字主要用于导出模块，使得其他文件可以通过 import 关键字来引入和使用这些模块。在Vue项目中，最常见的使用场景是导出Vue组件，但也可以导出其他JavaScript对象、函数或变量。

导出Vue组件

Vue组件通常使用 .vue 文件编写，并包含模板（template）、脚本（script）和样式（style）三个主要部分。当你想要在其他组件或视图中使用这个组件时，就需要导出它。

<!-- MyComponent.vue -->  
<template>  
  <div>  
    <h1>{{ message }}</h1>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'MyComponent',  
  data() {  
    return {  
      message: 'Hello, Vue!'  
    }  
  }  
}  
</script>  
  
<style>  
/* 组件的CSS样式 */  
</style>

在这个例子中，MyComponent.vue 组件使用 export default 导出了一个Vue对象，它包含了组件的选项，如 name 和 data。

导出其他JavaScript对象

可以在普通的 .js 文件中导出函数、变量或对象。

// utils.js  
export function sayHello(name) {  
  return `Hello, ${name}!`;  
}  
export const PI = 3.14159;  
export default {  
  calculateArea(radius) {  
    return PI * radius * radius;  
  }  
}

在这个例子中，utils.js 文件导出了一个函数 sayHello、一个常量 PI，以及一个默认导出的对象，该对象包含了一个 calculateArea 方法。

注意事项

• 每个文件只能有一个默认导出（export default），但可以有多个命名导出（export function、export const 等）。
• 当你使用默认导出时，在导入时可以使用任意名称来接收导出的模块，但如果是命名导出，则必须使用导出时指定的名称或别名。
• 在Vue项目中，import 和 export 语句通常放在文件的顶部，但也可以放在任何需要它们的代码块之前。
• Vue组件的默认导出通常是一个包含Vue选项的对象，这些选项定义了组件的行为和外观。

导入Vue组件

在Vue项目中，当你想要在其他组件或视图中使用某个Vue组件时，需要使用 import 语句来导入它。

<template>  
  <div>  
    <MyComponent />  
  </div>  
</template>  
  
<script>  
// 导入MyComponent组件  
import MyComponent from './MyComponent.vue'  
  
export default {  
  components: {  
    MyComponent // 在组件选项中注册MyComponent  
  }  
}  
</script>

在这个例子中，MyComponent 组件被导入并在当前组件的 components 选项中注册，这样它就可以在模板中使用了。

import

import 关键字用于导入由其他文件导出的模块。这些模块可以是Vue组件、JavaScript函数、变量、对象等。import 语句通常放在文件的顶部，尽管它们也可以放在函数或条件语句内部（但这在Vue组件中并不常见）。

导入Vue组件

在Vue项目中，最常见的是导入Vue组件。当想要在某个组件的模板中使用另一个组件时，需要先导入它，然后在该组件的 components 选项中注册它。

<template>  
  <div>  
    <MyComponent />  
  </div>  
</template>  
  
<script>  
// 导入MyComponent组件  
import MyComponent from './MyComponent.vue'  
  
export default {  
  components: {  
    MyComponent // 注册MyComponent组件  
  }  
}  
</script>

在这个例子中，MyComponent.vue 文件中的Vue组件被导入，并在当前组件的 components 选项中注册为 MyComponent。这样，它就可以在模板中作为 使用了。

导入其他JavaScript模块

可以导入普通的JavaScript文件（.js）中导出的函数、变量或对象。

// utils.js  
export function sayHello(name) {  
  return `Hello, ${name}!`;  
}  
export const PI = 3.14159;  
// 在另一个文件中导入  
import { sayHello, PI } from './utils.js';  
  
console.log(sayHello('Vue')); // 输出: Hello, Vue!  
console.log(PI); // 输出: 3.14159

在这个例子中，utils.js 文件中的 sayHello 函数和 PI 常量被导入，并可以在当前文件中使用。

导入默认导出

如果一个文件使用了 export default 导出了一个模块，可以在导入时使用任意名称来接收它。

// mathUtils.js  
export default {  
  calculateArea(radius) {  
    return Math.PI * radius * radius;  
  }  
}  
// 在另一个文件中导入  
import mathLib from './mathUtils.js';  
console.log(mathLib.calculateArea(5)); // 输出圆的面积

在这个例子中，mathUtils.js 文件中的默认导出被导入，并在当前文件中以 mathLib 名称接收。

注意事项

• 确保导入路径正确。路径可以是相对路径（如 ./MyComponent.vue）或绝对路径（从项目的根目录开始）。
• 如果在Vue CLI项目中工作，Webpack会处理 import 语句，并确保在需要时加载相应的文件。
• 当从npm包中导入模块时，路径通常是该包的名称（例如，import Vue from ‘vue’）。
• Vue单文件组件（.vue 文件）的导入和注册方式略有不同，因为它们需要在Vue组件的 components 选项中注册，而不是像普通JavaScript模块那样直接使用。