VUE import

### Vue.js 中 `import` 的详细用法

在 Vue.js 开发过程中，`import` 关键字用于导入模块或组件。这使得代码更加模块化和易于维护。

#### 导入整个模块
当需要使用某个库中的所有功能时，可以导入整个模块：

// 导入axios库以便发送HTTP请求
import axios from 'axios';

此语句会将 `axios` 库引入到当前文件中并赋值给变量 `axios`[^1]。

#### 按需导入特定成员
如果只需要部分导出项，则可以通过指定名称的方式按需加载：

// 只导入所需的部分而不是全部内容
import { createApp } from 'vue';

这种方式有助于减少打包体积，提高性能[^2]。

#### 动态导入
对于某些场景下可能不需要立即加载的资源（如懒加载路由），可采用动态导入语法：

const MyComponent = () => import('./components/MyComponent.vue');

这样可以在实际访问该页面之前延迟加载对应的 JavaScript 文件。

#### 组件注册与使用
除了普通的 JS 模块外，在单文件组件(SFC)之间也可以相互引用。例如下面展示了如何在一个父级 SFC 中声明子组件并通过标签形式嵌套显示它：

<template>
  <div>
    <!-- 使用已注册过的自定义元素 -->
    <my-component></my-component>
  </div>
</template>

<script>
// 预先载入外部定义好的其他SFC作为局部可用部件之一
import MyComponent from './MyComponent.vue';

export default {
  name: "ParentComponent",
  components: {
    // 将其映射为模板内使用的标记名
    MyComponent,
  },
};
</script>

上述例子说明了通过 `import` 来实现不同级别的依赖关系管理以及构建复杂应用结构的方法。