vue3项目中如何实现模块的自动导入

vue2和vue3一个很重要的代码区别就是从vue2对象化完整引入到函数化按需引入。从而解决了需要什么就引入什么的按需引入操作功能。

然而这一代码操作模式却也引出了后续繁琐代码的书写结构。

虽然现在绝大数开发工具都对未引入的内容进行语法错误提示，并提供快速修复。操作提示与协助自动引入对象的功能实现，但这也不能成为我们会喜欢编写如此繁琐代码内容的理由。所有，是否有不需要引入就可以直接使用。提高开发效率的重要问题。

我们可以使用auto.imports,这一插件可以帮助我们进行对象的自动引入操作，这样同样可以省却人工进行代码模式引入处理。在vue3项目中安装auto.imports插件，并且修改vite.config.ts配置文件，引入改插件声明成AutoImport

（1）安装

npm install unplugin-auto-import --save-dev

yarn add unplugin-auto-import --dev

（2）在plugins调用此插件，需要重点注意两个参数：

• 其一是dts要设置为true，该属性会在配置文件修改完并重启项目以后，在项目根目录会生成一个auto.imports.d.ts自动导入模块的配置文件。
• 当然，如果想在归中所有，可以进行自动导入的模块进行支持操作，则需要设置import:["vue"]。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
    plugins:[
        vue(),
        AutoImport({
            dts:true,
            imports:["vue"],
        })
    ],
});

现在通过npm run dev重启项目，并修改项目中的代码内容。将我们手动引入的代码进行删除，程序也能够进行完美的执行。

那么此时也有个疑问，那么对于第三方类库与第三方插件是否也能够支持自动导入？？？例如axios以及第三方插件vue-router等。

（1）首先我们需要进行模块安装

npm i axios
npm install vue-router

（2）修改vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from 'unplugin-auto-import/vite';
 
export default defineConfig({
    plugins:[
        vue(),
        AutoImport({
            dts:true,
            imports:[
                "vue",
                "vue-router",
                { axios: [['default','axios']] }
            ],
        })
    ],
});

经过以上配置，我们就可以在项目中进行axios或vue-router的直接调用。

不过在编辑的过程中，可以会有找不到模块对应内容的提示，虽然提示信息并不会影响程序执行的结果，但是代码的开发体验受到了极大的影响，

（3）可以尝试修改tsconfig.json文件。

设置文件中的include数组部分，这样当前项目能够利用这一描述文件进行资源的查找操作，而不会产生无法找到自动导入的函数模块内容。

"include":[
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts"
]