Archived

If you are looking for plugins please go to https://github.com/element-plus/unplugin-element-plus

vite-plugin-element-plus

English | 中文

This repo is for element-plus related Vite plugin

Install

npm i vite-plugin-element-plus -D

Usage

vite.config.js:

import importElementPlus from 'vite-plugin-element-plus'

export default {
  plugins: [
    importElementPlus(),
  ],
}

// or
export default {
  plugins: [
    importElementPlus({
      useSource: true
    }),
  ],
}

app code:

import { ElButton } from 'element-plus'

      ↓ ↓ ↓ ↓ ↓ ↓

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

Options

useSource

type UseSource = boolean

default: false

// useSource: false
import { ElButton } from 'element-plus'

      ↓ ↓ ↓ ↓ ↓ ↓

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

// useSource: true
import { ElButton } from 'element-plus'

      ↓ ↓ ↓ ↓ ↓ ↓

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

lib

Normally you wouldn't use this option but as a general option we exposed it anyway. When using this your bundle structure should be the same as ElementPlus. See unpkg.com for more information

type Lib = string

default: 'element-plus'

// lib: 'other-lib'
import { ElButton } from 'other-lib'

      ↓ ↓ ↓ ↓ ↓ ↓

import { ElButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'

format

type Format = 'esm' | 'cjs'

default: 'esm'

esm for [lib]/es/components/* cjs for [lib]/lib/components/*

• /es for ES Module 输出
• /lib for commonJS 的输出

This option is for which format to use

// format: 'cjs'
import { ElButton } from 'element-plus'

      ↓ ↓ ↓ ↓ ↓ ↓

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

prefix

type Prefix = string

// prefix = Al
import { AlButton } from 'xx-lib'