vue3.2引用unplugin-auto-import插入，解放开发中import组件

前言

       是否添加unplugin-auto-import取决于项目需求和团队习惯。如果项目中频繁使用Vue相关API，并且团队成员都熟悉这种自动导入方式，那么添加这个插件可能会提高效率。然而，如果项目结构相对简单，或者团队成员更习惯于显式导入依赖，那么可能不需要添加这个插件。总之，这是一个平衡开发效率和代码清晰度的决策。

引用unplugin-auto-import插件的优缺点

优点

• 自动导入: unplugin-auto-import允许自动导入常用的库和框架API，如Vue、Vuex、Vue Router等，从而减少在每个文件中重复编写import语句的需要。
• 代码整洁: 自动导入功能使得代码更加整洁，易于阅读和维护。
• 配置灵活性: 插件提供了灵活的配置选项，可以根据项目需求自定义自动导入的API。
• 减少打包体积: 通过只导入用到的API，有可能减少最终打包的体积。
• 开发效率提升: 减少手动导入工作量，可以加速开发流程。

缺点

1. 隐藏的依赖: 自动导入可能会隐藏代码的依赖关系，对于新加入项目的开发者来说，可能不清楚某些API是如何被引入的。
2. 配置复杂性: 对于初学者或不熟悉该插件的开发者来说，配置和理解unplugin-auto-import可能有一定难度。
   3.工具链复杂化: 在项目中增加额外的插件会使得工具链更加复杂，可能会影响构建速度和维护难度。
   4.IDE支持: 某些集成开发环境（IDE）可能不完全支持自动导入功能，这可能影响代码的智能提示和错误检查。

unplugin-auto-import插件引入

安装插件

npm install unplugin-auto-import -D
# 或者使用 yarn
yarn add unplugin-auto-import -D

配置vite配置

       在你的Vite配置文件（通常是vite.config.js或vite.config.ts）中添加对应的配置。在imports中添加你想要自动导入的相关库，如：vue、vue-router、vuex等。

import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      // 指定需要自动导入的库
      imports: ['vue', 'vue-router', 'vuex'],
      // Vite特定的配置
      dts: 'src/auto-imports.d.ts', // 生成自动导入类型声明文件
      // 其他配置...
    }),
    // ...其他插件
  ],
  // ...其他Vite配置
}

更新TypeScript配置

       如果项目是TypeScript项目，更新tsconfig.json以包含自动生成的类型声明文件：

{
  "compilerOptions": {
    // ...其他配置
    "types": [
      // ...其他类型
      "src/auto-imports.d.ts" // 添加这一行
    ]
  },
  "include": [
    "components.d.ts",
    "src/auto-imports.d.ts"
  ],
}

使用

<template>
  //...页面代码
</template>
<script lang="ts" setup>
// 使用vue-router，不用引用直接使用就可以
let router = useRouter();
let route = useRoute();
// 使用ref，不用引用直接使用就可以
const info = ref<any>({
  title: route?.meta?.title || "财务管理",
  rightButton: "新增",
  leftPath: "/",
});
let loading = ref<boolean>(false);
</script>

代码位置

       github代码地址

总结

       至此在在项目中配置unplugin-auto-import插件，自动引入组件库就完成。快去体验吧。