MrLi Vue3 Components

一个现代化的 Vue3 组件库，使用 TypeScript 和 Tailwind CSS 构建。

特性

• 🚀 基于 Vue 3 + TypeScript
• 🎨 使用 Tailwind CSS 样式
• 📦 支持 ES Module 和 CommonJS
• 🔧 完整的类型定义
• 📱 响应式设计
• ⚡ Vite 构建工具

安装

npm install mrli-vue3-components

使用方法

全局注册

import { createApp } from 'vue'
import MrliVue3Components from 'mrli-vue3-components'
import 'mrli-vue3-components/style.css'

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

按需导入

import { MButton, MCard } from 'mrli-vue3-components'
import 'mrli-vue3-components/style.css'

组件

MButton 按钮组件

<template>
  <MButton type="primary" size="medium" @click="handleClick">
    点击我
  </MButton>
</template>

Props

• type: 按钮类型 - 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
• size: 按钮尺寸 - 'small' | 'medium' | 'large'
• disabled: 是否禁用 - boolean
• loading: 加载状态 - boolean

Events

• click: 点击事件

MCard 卡片组件

<template>
  <MCard title="卡片标题" shadow="md">
    <template #header>
      自定义头部内容
    </template>
    
    卡片内容
    
    <template #footer>
      自定义底部内容
    </template>
  </MCard>
</template>

Props

• title: 卡片标题 - string
• shadow: 阴影大小 - 'none' | 'sm' | 'md' | 'lg' | 'xl'
• rounded: 是否圆角 - boolean
• bordered: 是否显示边框 - boolean

Slots

• default: 默认内容
• header: 头部内容
• footer: 底部内容

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build

# 构建类型定义
npm run build:lib

项目完成功能

✅ 已完成的功能：

• Vue3 + TypeScript 组件库架构
• Vite 构建配置
• MButton 按钮组件（支持多种类型、尺寸、状态）
• MCard 卡片组件（支持插槽、多种样式配置）
• 完整的 TypeScript 类型定义
• 开发环境和演示页面
• 支持全局安装和按需导入
• Tailwind CSS 样式系统

修改历史

2024-12-19

• 重构为 Vue3 组件库：从简单的 npm 包重构为完整的 Vue3 组件库
• 技术栈升级：
  • 使用 Vue 3 + TypeScript
  • 集成 Vite 作为构建工具
  • 采用 Tailwind CSS 样式系统
• 组件开发：
  • 创建 MButton 按钮组件，支持多种类型、尺寸和状态
  • 创建 MCard 卡片组件，支持插槽和样式配置
  • 完整的 TypeScript 类型定义
• 构建配置：
  • 配置 Vite 用于组件库构建
  • 支持 ES Module 和 CommonJS 输出
  • 自动生成类型定义文件
• 开发环境：
  • 创建开发环境和演示页面
  • 支持热重载开发
• 包管理：
  • 更新 package.json 配置
  • 支持全局安装和按需导入
  • 配置正确的入口文件和类型定义

发布信息

• 包名：mrli-awesome-package-2024
• 版本：1.0.0
• 发布时间：2024-10-31
• npm 链接：https://www.npmjs.com/package/mrli-awesome-package-2024

License

ISC