element-plus automatically imports

Original: https://www.jb51.net/article/258647.htm

Use the unplugin-vue-components plug -in for automatic on-demand import. When we use element tags, we no longer need to use import to import components.

For example:

<el-button>自动导入</el-button>

Note: When we want to use commands to create element components, styles cannot be automatically imported.

for example:

import { ElMessage } from 'element-plus'
 
ElMessage.warning('warning')

If import is not used, an error will be reported directly: ElMessage is not defined. So this import cannot be saved. But after importing, the message pop-up window came out, but there was no style. It can be solved by using unplugin-element-plus  . The main functions of this plugin are as follows:

import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'

The plug-in actually automatically imports the css or sass files of the required components

//首先安装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()]
    })
  ]
})

After configuration, you can enjoy the automatic import of element-plus. Of course, components that use commands still need to be imported manually.

elementPlus icon automatically imported

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,
    }),
  ]
})