vue3+vite installation and configuration element-plus

 Configure element-plus

1. Installation

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

2. Import plug-ins on demand

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

3. Configure 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. Introduce in main.ts

Note: element-plus does not need to be introduced in main.ts when imported on demand, the plugin will be automatically mounted and processed, and can be used directly globally

Here introduce element-plus style and icon in main.ts

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. Use in vue components
 

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