vue-vite-genesis

my version of a minimal vue + vite + tailwind project starter based on mutoe's vue3-realworld-example-app

Features

• 🎨 Modern UI with Tailwind CSS

  • Clean, responsive design
  • Beautiful component styling
  • Dark mode support
  • Custom animations and transitions

• 🛠️ Development Tools

  • Vite for lightning-fast development
  • TypeScript for type safety
  • Tailwind CSS for utility-first styling
  • ESLint and Prettier for code quality
  • Vitest for unit testing
  • Cypress for E2E testing

• 📦 Core Dependencies

  • Vue 3 with Composition API
  • Vue Router for routing
  • Pinia for state management
  • Axios for API requests
  • @vueuse/core for composables

Quick Start

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm serve

# Run tests
pnpm test

Development Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm serve - Preview production build
• pnpm test - Run all tests
• pnpm test:unit - Run unit tests
• pnpm test:unit:vitest:ui - Run unit tests with UI
• pnpm lint - Run linting
• pnpm clean:cache - Clean cache
• pnpm clean:lib - Clean dependencies

Project Structure

src/
├── assets/        # Static assets
├── components/    # Vue components
├── composables/   # Vue composables
├── layouts/       # Layout components
├── router/        # Vue Router configuration
├── stores/        # Pinia stores
├── styles/        # Global styles
├── types/         # TypeScript types
└── views/         # Page components

Contributing

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

```shell script
pnpm install

# Development
pnpm dev

# Build dist
pnpm build

# Run unit tests
pnpm test:unit
pnpm test:unit:ci

# Run E2E tests
pnpm test:e2e
pnpm test:e2e:ci

main features

• Vite
• Composition API
• SFC <script setup> sugar
• Suspense (Experimental)
• Vue router
• Axios with middleware pattern for API requests
• Pinia for state management
• TypeScript and Vue tsc for static analysis
• swagger-typescript-api for auto generate interface from swagger
• ESLint and @mutoe/eslint-config for linting and styling (based on @anthony/eslint-config)
• Vitest for unit testing
• Testing Library for component testing
• Cypress for E2E testing
• GitHub Actions CI/CD