next-vue

一个基于 Vue3 + TypeScript + TSX + Pinia 的组件库项目，基于 vxe-table 进行封装。

特性

• 🎨 基于 Vue3 Composition API
• 📦 支持按需导入和全量导入
• 🎯 TypeScript 完整支持
• 🎨 支持多主题切换（default/dark/light）
• 📱 基于 vxe-table 设计风格
• 🔧 支持 UMD/CommonJS/ESM 多格式打包
• 🛠️ 完善的工具类（UtilString、UtilDate、UtilHttp 等）
• 📚 完整的开发文档

安装

npm install next-vue
# 或
yarn add next-vue
# 或
pnpm add next-vue

快速开始

全量导入

import { createApp } from 'vue'
import NextVue from 'next-vue'
import 'next-vue/dist/styles/index.css'

const app = createApp(App)
app.use(NextVue)
app.mount('#app')

按需导入

import { NextButton, NextCard } from 'next-vue'
import 'next-vue/dist/styles/button.css'
import 'next-vue/dist/styles/card.css'

使用工具类

import { Next } from 'next-vue'

// 字符串工具类
Next.UtilsString.isEmpty('')

// 日期工具类
Next.UtilsDate.format(new Date(), 'YYYY-MM-DD')

// HTTP 请求
await Next.UtilHttp.get('/api/users')

组件列表

• NextButton - 按钮组件
• NextCard - 卡片组件
• NextRadio / NextRadioGroup - 单选框组件
• NextCheckbox / NextCheckboxGroup - 复选框组件
• NextButtonGroup - 按钮组组件
• NextInput / NextTextarea - 输入框组件
• NextDatePicker / NextTimePicker / NextDateTimePicker - 日期/时间选择器组件

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 运行 demo
npm run dev:demo

构建与发布

组件库构建

# 清理 dist 和 demo/dist
npm run clean

# 仅构建组件库
npm run build:lib

# 兼容旧命令，效果同上
npm run build

组件库构建完成后，产物会输出到 dist/ 目录，可用于本地联调、npm pack 或正式发布。 其中：

• dist/ 根目录默认输出 Vue 3 的 ESM 组件产物，并保留 packages/ 下的原始目录结构
• dist/cjs/ 输出 CommonJS 版本
• dist/amd/ 输出 AMD 版本
• dist/umd/ 输出 UMD 版本
• dist/types/ 输出类型声明
• dist/styles/index.css 输出聚合样式文件

默认规则是“一个源码模块对应一个构建后的 JS 文件”，不再把整个组件库合并成单一产物。

Demo 构建

# 从根目录构建 demo 静态站点
npm run build:demo

Demo 构建产物会输出到 demo/dist/current/，同时保留一份 demo/dist/<版本号>/ 的版本化快照，便于不同版本并存部署。

发布前校验

# 执行类型检查、lint、组件库构建
npm run release:check

# 执行类型检查、lint、组件库构建，并附带构建 demo
npm run release

release:check 默认不会真正执行 npm publish，它只负责发布前的校验和产物准备。

正式发布组件库

# 先完成发布前校验
npm run release:check

# 然后按你的仓库配置执行正式发布
npm publish

如果你希望通过脚本直接串联正式发布，也可以执行：

npm run release:publish

如需在发布时同时构建 demo，可执行：

npm run release -- --with-demo --publish

发布成功后，脚本会自动把根目录 package.json 的版本号递增到下一个开发版本，默认使用 patch。

# 发布成功后自动从 1.0.0 升到 1.0.1
npm run release:publish

# 发布成功后自动从 1.0.0 升到 1.1.0
npm run release -- --publish --version-type=minor

# 发布成功后自动从 1.0.0 升到 2.0.0
npm run release -- --publish --version-type=major

如果你只想发布，不想自动修改版本号，可以显式关闭：

npm run release -- --publish --skip-version-bump

许可证

MIT