unplugin-element-plus
v0.11.2TypeScript
Import Element Plus on demand. Support Vite, Webpack, Vue CLI, Rollup and esbuild.
29.4K/weekUpdated 1 months agoMITUnpacked: 24.9 KB
Published by jeremywuuuuu
npm install unplugin-element-plus
unplugin-element-plus
这个仓库是用于 Element Plus 相关的 unplugin 插件工具。感谢 @antfu。
###### 功能
- 💚 为 Element Plus 按需引入样式。
- 🌎 替换默认语言。
- ⚡️ 使用 unplugin 以支持 Vite, Webpack, Vue CLI, Rollup, esbuild 等。
安装
``bash`
npm i unplugin-element-plus -D
Vite
`ts
// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
`
Rollup
`ts
// rollup.config.js
import ElementPlus from 'unplugin-element-plus/rollup'
export default {
plugins: [
ElementPlus({
// options
}),
],
}
`
esbuild
`ts
// esbuild.config.js
import { build } from 'esbuild'
build({
plugins: [
require('unplugin-element-plus/esbuild')({
// options
}),
],
})
`
Webpack
`ts`
// webpack.config.js
module.exports = {
/ ... /
plugins: [
require('unplugin-element-plus/webpack')({
// options
}),
],
}
Vue CLI
`ts`
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-element-plus/webpack')({
// options
}),
],
},
}
使用
插件会自动转换：
`javascript
import { ElButton } from 'element-plus'
// ↓ ↓ ↓ ↓ ↓ ↓
import { ElButton } from 'element-plus'
import 'element-plus/es/components/button/style/css'
`
选项
$3
`ts`
type UseSource = boolean
`javascript
// 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'
`
$3
一般这个是用不到的，不过作为一个通用选项，还是暴露了出来，如果有用到这个的结构一定要和
ElementPlus 的输出包结构一致，详见 unpkg.com
`ts`
type Lib = string
default: 'element-plus'
`javascript
// lib: 'other-lib'
import { ElButton } from 'other-lib'
// ↓ ↓ ↓ ↓ ↓ ↓
import { ElButton } from 'other-lib'
import 'other-lib/es/components/button/style/css'
`
$3
`ts`
type Format = 'esm' | 'cjs'
default: 'esm'
esm 对应 [lib]/es/components/*
cjs 对应 [lib]/lib/components/*
- /es 对应 ES Module 输出/lib
- 对应 CommonJS 的输出
使用该选项来选择使用哪一个包。
`javascript
// format: 'cjs'
import { ElButton } from 'element-plus'
// ↓ ↓ ↓ ↓ ↓ ↓
import { ElButton } from 'element-plus'
import 'element-plus/lib/components/button/style/css'
`
$3
`ts`
type Prefix = string
`javascript`
// prefix = Al
import { AlButton } from 'xx-lib'$3
`ts`
type IgnoreComponents = string[]
跳过组件列表的样式导入。 对于没有样式文件的 Element Plus 组件很有用。
在编写此文档时，仅有“AutoResizer”组件。
`javascript
// format: 'cjs'
import { ElAutoResizer } from 'element-plus'
// ↓ ↓ ↓ ↓ ↓ ↓
import { ElAutoResizer } from 'element-plus'
``
$3
替换默认语言，你可以 在这 查看所有语言列表。