vue3+vite安装配置element-plus

 配置 element-plus

1. 安装

yarn add element-plus @element-plus/icons-vue

2. 按需引入插件

yarn add unplugin-vue-components unplugin-auto-import -D

3. 配置vite.config.ts

// vite.config.ts
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()],
    }),
  ],
})

4. 在main.ts引入

注意：按需引入时element-plus不需要在main.ts中引入，插件会自动挂载处理，可以在全局直接使用

这里在main.ts中引入element-plus样式与图标

import * as ElementPlusIconsVue from '@element-plus/icons-vue'; //引入图标
import 'element-plus/dist/index.css'; //引入样式

//...

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

4. 在vue组件中使用
 

 <el-tag class="count-tag" @click="counterAddAdd">count is {
   
   { counter }}</el-tag>