原文: https://www.jb51.net/article/258647.htm
自動オンデマンド インポートにはunplugin-vue-components プラグインを使用します。要素タグを使用する場合、コンポーネントをインポートするために import を使用する必要はなくなりました。
例えば:
<el-button>自动导入</el-button>
注: コマンドを使用して要素コンポーネントを作成する場合、スタイルを自動的にインポートすることはできません。
例えば:
import { ElMessage } from 'element-plus'
ElMessage.warning('warning')
インポートされていない場合は、「ElMessage が定義されていません」というエラーが直接報告されます。したがって、このインポートは保存できません。しかし、インポート後、メッセージポップアップウィンドウは表示されますが、スタイルはありません。unplugin-element-plusを使用することで解決できます このプラグインの主な機能は以下の通りです。
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
実際には、プラグインは必要なコンポーネントの css または sass ファイルを自動的にインポートします。
//首先安装unplugin-vue-components和unplugin-element-plus
npm i unplugin-vue-components unplugin-element-plus -D
//vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
ElementPlus({
importStyle: 'sass',
useSource: true
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
設定後は、Element-Plus の自動インポートをお楽しみいただけます。もちろん、コマンドを使用するコンポーネントは手動でインポートする必要があります。
elementPlus アイコンが自動的にインポートされました
npm i -D unplugin-icons unplugin-vue-components
npm i @element-plus/icons-vue
//vite.config.ts
import path from 'path'
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 Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import {
ElementPlusResolver
} from 'unplugin-vue-components/resolvers'
const pathSrc = path.resolve(__dirname, 'src')
export default defineConfig({
esolve: {
alias: {
'@': pathSrc,
},
},
plugins: [
vue(),
AutoImport({
resolvers: [
ElementPlusResolver(),
IconsResolver({
prefix: 'Icon',
}),
],
dts: path.resolve(pathSrc, 'auto-imports.d.ts'),
}),
Components({
resolvers: [
ElementPlusResolver(),
IconsResolver({
enabledCollections: ['ep'],
})
],
dts: path.resolve(pathSrc, 'components.d.ts'),
}),
Icons({
autoInstall: true,
}),
]
})