参考文档

https://penui.netlify.app/

简介

@dfei/pen-ui库是基于vue3和element-plus的二次封装，实现了一些常用的组件，通过json配置结合插槽灵活生成页面。

安装

using npm:

npm install @dfei/pen-ui --save

using yarn:

yarn add @dfei/pen-ui --save

使用

1. 全局引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// Element-UI
import "element-plus/dist/index.css";
import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn'

// pen-ui
import '@dfei/pen-ui/dist/es/style.css';
import PenUI from '@dfei/pen-ui'

const app = createApp(App)
app.use(ElementPlus, { locale });
app.use(PenUI);
app.use(router).mount('#app')

2. 自动按需引入

安装自动导入插件

npm install unplugin-vue-components unplugin-auto-import --save-dev

在 vite.config.js 中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'

// 引入PenUI的解析器
import { PenUIResolver } from '@dfei/pen-ui'; 

export default defineConfig({
    plugins: [
        vue(),
        Components({
            resolvers: [
                ElementPlusResolver(),
                PenUIResolver(),
            ],
        }),
        AutoImport({
            resolvers: [ElementPlusResolver()]
        })
    ]
})

3. 手动引入

import { PenTable, PenSearch, PenPage } from '@dfei/pen-ui';