export default vue

### 如何在 Vue.js 中使用 `export default` 导出组件或模块

#### 使用 `export default` 导出单文件组件

当创建一个 Vue 单文件组件时，通常会在 `.vue` 文件内定义模板、脚本和样式部分。通过 `export default` 可以暴露该组件对象给其他地方引入。

<template>
  <div class="example-component">
    <!-- 组件的HTML结构 -->
  </div>
</template>

<script>
// 定义并导出默认组件配置选项
export default {
  name: 'ExampleComponent',
  data() {
    return {
      message: 'Hello from Example Component!'
    }
  },
  methods: {
    greetUser() {
      console.log(this.message);
    }
  }
}
</script>

<style scoped>
.example-component {
  /* 组件特定CSS */
}
</style>

此方式适用于构建可重用的小型功能单元，在项目中可以方便地被引用[^1]。

#### 使用 `export default` 导出 JavaScript 模块

对于普通的 JavaScript 或 TypeScript 文件来说，如果希望将其作为逻辑片段或是工具函数集合来共享，则可以通过如下形式来进行：

import axios from 'axios';

const apiClient = axios.create({
  baseURL: '/api/v1/',
});

async function fetchUserData(userId) {
  const response = await apiClient.get(`users/${userId}`);
  return response.data;
}

// 将整个模块的内容设置为默认导出项
export default { 
  apiClient,
  fetchUserData
};

这种方式允许开发者将一组相关的函数打包在一起，并且只需要一次简单的导入语句就可以获取到全部的功能接口[^3]。

#### 在另一个文件里导入已导出的对象

无论是组件还是普通JS/TS模块，都可以利用 ES6 的解构赋值特性简化语法:

// 假设上面的例子保存在一个名为 exampleModule.js 的文件中
import myModule from './path/to/exampleModule';
myModule.fetchUserData(1).then(data => console.log(data));

// 如果是.vue格式的组件则可以直接注册成子组件或者全局组件使用
import MyComponent from '@/components/MyComponent.vue'
new Vue({ el: '#app', components: { MyComponent } });

上述方法展示了如何有效地组织代码库中的各个组成部分，使得应用程序更加模块化易于维护和发展.