526互联

vue3之element-plus

发布时间 2023-07-26 10:55:39作者: cmwang2017

1.安装elementPlus和自动导入插件

npm i elementPlus

npm install -D unplugin-vue-components unplugin-auto-import

2、配置自动按需导入

// 引入插件
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()],
}),
]
})

3、icon图标安装

$ npm install @element-plus/icons-vue

注册所有图标

// 如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}