unplugin-element-plus

English | 中文

这个仓库是用于 Element Plus 相关的 unplugin 插件工具。感谢 @antfu。

功能

• 💚 为 Element Plus 按需引入样式。
• 🌎 替换默认语言。
• ⚡️ 使用 unplugin 以支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等。

安装

1npm i unplugin-element-plus -D

1// vite.config.ts
2import ElementPlus from 'unplugin-element-plus/vite'
3
4export default {
5  plugins: [
6    ElementPlus({
7      // options
8    }),
9  ],
10}

1// rollup.config.js
2import ElementPlus from 'unplugin-element-plus/rollup'
3
4export default {
5  plugins: [
6    ElementPlus({
7      // options
8    }),
9  ],
10}

1// esbuild.config.js
2import { build } from 'esbuild'
3
4build({
5  plugins: [
6    require('unplugin-element-plus/esbuild')({
7      // options
8    }),
9  ],
10})

1// webpack.config.js
2module.exports = {
3  /* ... */
4  plugins: [
5    require('unplugin-element-plus/webpack')({
6      // options
7    }),
8  ],
9}

1// vue.config.js
2module.exports = {
3  configureWebpack: {
4    plugins: [
5      require('unplugin-element-plus/webpack')({
6        // options
7      }),
8    ],
9  },
10}

使用

插件会自动转换：

1import { ElButton } from 'element-plus'
2
3//    ↓ ↓ ↓ ↓ ↓ ↓
4
5import { ElButton } from 'element-plus'
6import 'element-plus/es/components/button/style/css'

选项

useSource

1type UseSource = boolean

1// useSource: false
2import { ElButton } from 'element-plus'
3
4//    ↓ ↓ ↓ ↓ ↓ ↓
5
6import { ElButton } from 'element-plus'
7import 'element-plus/es/components/button/style/css'
8
9// useSource: true
10import { ElButton } from 'element-plus'
11
12//    ↓ ↓ ↓ ↓ ↓ ↓
13
14import { ElButton } from 'element-plus'
15import 'element-plus/es/components/button/style/index'

lib

一般这个是用不到的，不过作为一个通用选项，还是暴露了出来，如果有用到这个的结构一定要和 ElementPlus 的输出包结构一致，详见 unpkg.com

1type Lib = string

default: 'element-plus'

1// lib: 'other-lib'
2import { ElButton } from 'other-lib'
3
4//    ↓ ↓ ↓ ↓ ↓ ↓
5
6import { ElButton } from 'other-lib'
7import 'other-lib/es/components/button/style/css'

format

1type Format = 'esm' | 'cjs'

default: 'esm'

esm 对应 [lib]/es/components/*

cjs 对应 [lib]/lib/components/*

• /es 对应 ES Module 输出
• /lib 对应 CommonJS 的输出

使用该选项来选择使用哪一个包。

1// format: 'cjs'
2import { ElButton } from 'element-plus'
3
4//    ↓ ↓ ↓ ↓ ↓ ↓
5
6import { ElButton } from 'element-plus'
7import 'element-plus/lib/components/button/style/css'

prefix

1type Prefix = string

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

ignoreComponents

1type IgnoreComponents = string[]

跳过组件列表的样式导入。 对于没有样式文件的 Element Plus 组件很有用。 在编写此文档时，仅有“AutoResizer”组件。

1// format: 'cjs'
2import { ElAutoResizer } from 'element-plus'
3
4//    ↓ ↓ ↓ ↓ ↓ ↓
5
6import { ElAutoResizer } from 'element-plus'

defaultLocale

替换默认语言，你可以 在这 查看所有语言列表。

其他插件

• unplugin-vue-components