@el-plus/ui

基于 pnpm workspace + ts + element-plus 开发

完整引入

``bash
import ElPlus from 'el-plus'
import 'el-plus/dist/index.css'
app.use(ElPlus)
`

$3

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

`
{
"compilerOptions": {
// ...
"types": ["el-plus/global"]
}
}
`


按需导入方式1 (简单)


`js
// main.ts
import 'el-plus/dist/index.css' // 引入所有样式
// xx.vue
import { ElButtons } from 'el-plus'

`


按需导入导入方式2 (待增加)

您需要使用额外的插件来导入要使用的组件。

$3

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
` bash
$ npm install -D unplugin-vue-components unplugin-auto-import
`
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

`js
import { defineConfig } from 'vite'
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()],
}),
],
})

`


$3


在vue文件中import即可,但需要安装 unplugin-element-plus 来导入样式,配置文档参考docs
` js


`
`js
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
// ...
plugins: [ElementPlus({
lib:'el-plus'
})],
})
``