@xjw_/vue3-npm-system

基于 Vue 3 + Element Plus 的企业级组件库

特性

• 🎨 基于 Element Plus 二次封装
• 📦 支持 npm 发布和安装
• 🔧 提供常用工具函数
• 💡 TypeScript 支持
• 🎯 开箱即用的通用组件

安装

npm install @xjw_/vue3-npm-system

快速开始

1. 在 main.ts 中引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import JcVue3NpmSystem from '@xjw_/vue3-npm-system'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.use(JcVue3NpmSystem)

app.mount('#app')

2. 在组件中使用

<template>
  <div>
    <jc-button type="primary" @click="handleClick">
      按钮
    </jc-button>
    
    <jc-table
      :data="tableData"
      :columns="columns"
      @refresh="handleRefresh"
    />
    
    <jc-form
      v-model="formData"
      :items="formItems"
      @submit="handleSubmit"
    />
    
    <jc-dialog
      v-model="dialogVisible"
      title="标题"
      @confirm="handleConfirm"
    >
      内容
    </jc-dialog>
    
    <jc-upload
      action="/api/upload"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 使用工具函数
import { utils } from '@xjw_/vue3-npm-system'

const { debounce, throttle, formatDate, storage } = utils
</script>

组件列表

JcButton - 按钮组件

Element Plus Button 的二次封装，增加了一些实用功能。

<jc-button
  type="primary"
  size="default"
  :loading="false"
  :disabled="false"
  :auto-loading="false"
  text="按钮文本"
  @click="handleClick"
>
  按钮内容
</jc-button>

JcTable - 表格组件

封装了搜索、分页、操作列等常用功能。

<jc-table
  :data="tableData"
  :columns="columns"
  :loading="loading"
  :total="total"
  :current-page="currentPage"
  :page-size="pageSize"
  :show-selection="true"
  :show-index="true"
  :searchable="true"
  @update:current-page="handlePageChange"
  @update:page-size="handleSizeChange"
  @refresh="handleRefresh"
  @search="handleSearch"
/>

JcForm - 表单组件

动态表单生成，支持多种表单类型。

<jc-form
  v-model="formData"
  :items="formItems"
  :span="12"
  :gutter="20"
  @submit="handleSubmit"
  @reset="handleReset"
/>

JcDialog - 对话框组件

简化对话框的使用。

<jc-dialog
  v-model="visible"
  title="标题"
  :width="'500px'"
  :confirm-loading="loading"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  内容
</jc-dialog>

JcUpload - 上传组件

文件上传组件。

<jc-upload
  action="/api/upload"
  :headers="headers"
  :data="data"
  :multiple="true"
  :limit="3"
  :max-size="10"
  @success="handleSuccess"
  @error="handleError"
/>

工具函数

debounce - 防抖函数

import { utils } from '@xjw_/vue3-npm-system'

const debouncedFn = utils.debounce(() => {
  console.log('执行')
}, 300)

throttle - 节流函数

const throttledFn = utils.throttle(() => {
  console.log('执行')
}, 1000)

deepClone - 深拷贝

const cloned = utils.deepClone(original)

formatDate - 格式化日期

const dateStr = utils.formatDate(new Date(), 'YYYY-MM-DD')

storage - 本地存储

utils.storage.set('key', 'value')
const value = utils.storage.get('key')
utils.storage.remove('key')

cookie - Cookie 操作

utils.cookie.set('key', 'value', { expires: 7 })
const value = utils.cookie.get('key')
utils.cookie.remove('key')

validator - 验证函数

utils.validator.isEmail('[email protected]')
utils.validator.isPhone('13800138000')
utils.validator.isUrl('https://example.com')

自定义指令

v-permission - 权限指令

<el-button v-permission="'admin'">
  仅管理员可见
</el-button>

v-debounce - 防抖指令

<el-button v-debounce:click="300" @click="handleClick">
  防抖按钮
</el-button>

v-copy - 复制指令

<div v-copy="'要复制的文本'">
  点击复制
</div>

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

# 发布到npm
npm run release

License

MIT