快速开始

安装

npm

$ npm install vue-jwhuang-ui

pnpm

$ pnpm add vue-jwhuang-ui

yarn

$ yarn add vue-jwhuang-ui

使用组件

全局注册

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

import VueJwhuangUI from 'vue-jwhuang-ui'
import 'vue-jwhuang-ui/dist/style.css'

const app = createApp(App)
app.use(VueJwhuangUI)

app.mount('#app')

按需引入

<script setup lang="ts">
import { Input } from 'vue-jwhuang-ui'
import 'vue-jwhuang-ui/dist/style.css'
</script>

<template>
  <Input type="text" />
</template>

组件

组件名称	组件说明
SvgIcon	图标组件
Input	输入类组件
Popup	弹窗组件
RenderForm	动态表单
RenderSearch	查询表单
RenderTable	配置表格

工具函数

函数名称	说明	类型
formatNumber	数字格式化函数	(value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.') => string
add	处理 js 加减精度问题	(num1: number, num2: number) => number
downloadFile	下载文件到本并自定义文件名，未传 name 时，从文件地址中自动提取文件名称	(url: string, fileName?: string) => void
objectToQueryStr	object转url string拼接	(obj:object) => string
urlParamsToObject	url路径转object	(url:string) => object

注意

使用项目必须注册 Element-plus 组件库

文档结构目录

├─ examples               # VPDemo组件自动解析此文件夹下的所有.vue文件
├─ components             # .md文件
├─ public                 # 静态资源文件
├─ .vitepress
│  ├─ config              # 插件配置
|  │  ├─ global.ts        # 全局变量定义
|  │  └─ plugins.ts       # 自定义.md文件渲染
│  ├─ theme               # 主题配置
│  ├─ utils               # 文档工具函数
│  ├─ vitepress
|  │  ├─ vp-demo          # VPDemo组件源码
|  │  ├─ style            # VPDemo组件样式
|  │  └─ index.ts         # 暴露VPDemo组件
│  └─ config.ts           # vitepress配置文件
├─ packages               # 全局组件模块
├─ index.md               # 文档home页面
├─ tsconfig.json          # typescript 全局配置
└─ vite.config.ts         # vite 全局配置文件（支持tsx）

Git 提交规范

• ci: ci 配置文件和脚本的变动;
• chore: 构建系统或辅助工具的变动;
• fix: 代码 BUG 修复;
• feat: 新功能;
• perf: 性能优化和提升;
• refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
• style: 代码格式调整，可能是空格、分号、缩进等等;
• docs: 文档变动;
• test: 补充缺失的测试用例或者修正现有的测试用例;
• revert: 回滚操作;