一、Vue3常用API导入

安装依赖

	pnpm i -D unplugin-auto-import

进行Vite配置

文件名：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],}),],
})

可能会出现TypeScript-eslint监测不识别的问题

typescript 报错：'ref' is not defined.

解决方案

1、运行项目

pnpm dev

此时，插件unplugin-auto-import会在项目的根目录生成一个文件：auto-imports.d.ts

2、将生成的TypeScript声明文件引入Vite和tsconfig

文件名：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],dts: './auto-imports.d.ts', // 此处引入自动生成的声明文件}),],
})

文件名：tsconfig.json

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

此时eslint可能会报错no-unref

需要插件unplugin-auto-import生成对应的.eslintrc-auto-import.json规则文件引入到.eslintrc.cjs中生效。

1、配置vite文件

文件名：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue'],dts: './auto-imports.d.ts', // 此处引入自动生成的声明文件eslintrc: {enabled: true, // 1、true时生成eslint配置文件，2、生成后改为false，避免重复消耗},}),],
})

此处设置eslinrc.enabled的值为true，后面运行项目会生成对应的文件。

2、运行项目，以此来生成文件：

pnpm dev

此时在项目的根目录已经生成了文件：.eslintrc-auto-import.json

3、在eslintrc配置文件中引入刚刚自动生成的配置规则

文件名：.eslintrc.cjs

extends: ['plugin:json/recommended','plugin:vue/vue3-essential','eslint:recommended','@vue/prettier','./.eslintrc-auto-import.json'],

测试效果

这里的sfc页面不需要从vue模块里面单独导出ref来使用，直接使用即可。

浏览器控制台：

 测试vueAPI                                 Test.vue:10

此时浏览器也打印出了对应的值，且没有报错。

二、自动引入NaiveUI组件

安装依赖

pnpm i -D unplugin-vue-components

配置Vite文件

文件名：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),AutoImport({// 自动导入 Vue 相关函数，如：ref, reactive, toRef 等imports: ['vue',{'naive-ui': ['useDialog','useMessage','useNotification','useLoadingBar',],},],dts: './auto-imports.d.ts',eslintrc: {enabled: false, // 1、true时生成eslint配置文件，2、生成后改为false，避免重复消耗},}),Components({resolvers: [NaiveUiResolver()],}),],
})

查看效果

浏览器查看