My UI Components

A Vue3 + TypeScript + Element Plus UI component library with VitePress documentation.

✨ Features

• 🚀 Vue 3 + TypeScript: Built with the latest Vue 3 Composition API and full TypeScript support
• 🎨 Element Plus Integration: Seamlessly integrates with Element Plus design system
• 📦 Tree Shakable: Only import the components you need
• 🌈 Customizable: Easy to customize with CSS variables and props
• 📱 Responsive: Mobile-first design approach
• 📖 Rich Documentation: Comprehensive documentation with live examples

🚀 Quick Start

Installation

npm install @your-username/vue-ui-components

Usage

Full Import

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import MyUIComponents from '@your-username/vue-ui-components'
import '@your-username/vue-ui-components/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(MyUIComponents)

On-demand Import

<script setup lang="ts">
import { MyButton } from '@your-username/vue-ui-components'
import '@your-username/vue-ui-components/dist/style.css'
</script>

<template>
  <MyButton type="primary">Click me</MyButton>
</template>

🛠️ Development

Setup

# Install dependencies
npm install

# Development
npm run dev

# Build library
npm run build

# Preview build
npm run preview

# Documentation development
npm run docs:dev

# Build documentation
npm run docs:build

# Preview documentation
npm run docs:preview

Development

1. Component Development: Edit components in src/components/
2. Documentation: Edit documentation in docs/
3. Testing: Use the development environment at http://localhost:5173

Project Structure

my-ui-components/
├── src/                    # Source code
│   ├── components/         # Vue components
│   │   ├── MyButton/       # Button component
│   │   └── MyCard/         # Card component
│   ├── types/              # TypeScript type definitions
│   └── index.ts           # Main entry point
├── docs/                   # VitePress documentation
│   ├── .vitepress/        # VitePress configuration
│   ├── components/        # Component documentation
│   ├── guide/             # User guide
│   └── index.md           # Documentation homepage
├── dist/                   # Build output
├── package.json
├── vite.config.ts         # Vite configuration
└── tsconfig.json          # TypeScript configuration

📦 Components

MyButton

Enhanced button component with hover animations and additional styling options.

Props:

• type: Button type (primary, success, warning, danger, info, text)
• size: Button size (large, default, small)
• disabled, loading, round, circle, plain: Boolean props

MyCard

Card component with enhanced hover effects and flexible content structure.

Props:

• header: Card header text
• shadow: Shadow behavior (always, hover, never)
• bodyStyle: Custom body styling

Slots:

• header: Custom header content
• default: Main content
• footer: Footer content

🎯 Usage

Full Import

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import MyUIComponents from 'my-ui-components'

const app = createApp(App)
app.use(ElementPlus)
app.use(MyUIComponents)

On-demand Import

<script setup lang="ts">
import { MyButton, MyCard } from 'my-ui-components'
</script>

<template>
  <MyButton type="primary">Click me</MyButton>
  <MyCard header="Card Title">
    Card content
  </MyCard>
</template>

📚 Documentation

Start the documentation development server:

npm run docs:dev

Visit http://localhost:5173 to view the documentation with live component examples.

🔧 Development Scripts

• npm run dev - Start development server
• npm run build - Build the library
• npm run preview - Preview the built library
• npm run docs:dev - Start documentation development server
• npm run docs:build - Build documentation
• npm run docs:preview - Preview built documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

• Vue.js - The progressive JavaScript framework
• Element Plus - Vue 3 UI toolkit
• VitePress - Static site generator
• Vite - Next generation build tool