按需引入
npm install -D unplugin-vue-components unplugin-auto-import
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
在使用ElMessage或ElMessageBox是vscode开发工具会报红,原因是找不到,但是页面能正常使用。
而且auto-imports.d.ts里已经自动引入了
export {}
declare global {
const ElMessage: typeof import('element-plus/es')['ElMessage']
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
}
解决报红:tsconfig.json里的include,把
"src/**/*.d.ts"
改为"**/*.d.ts"
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
修改后:
"include": ["src/**/*.ts", "**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]