Getting Started

Welcome to Ghuo Design! This guide will help you get up and running with our Vue 3 component library.

Installation

Using npm

npm install ghuo-design

Using yarn

yarn add ghuo-design

Using pnpm

pnpm add ghuo-design

Quick Start

1. Import Ghuo Design

In your main.js file:

import { createApp } from 'vue'
import GhuoDesign from 'ghuo-design'
import 'ghuo-design/dist/ghuo-design.css'
import App from './App.vue'

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

2. Use Components

Now you can use Ghuo Design components in your Vue templates:

<template>
  <div>
    <g-button type="primary">Primary Button</g-button>
    <g-input placeholder="Enter text" />
  </div>
</template>

On-Demand Import

To reduce bundle size, you can import components on demand:

Using babel-plugin-import

1. Install the plugin:

npm install babel-plugin-import -D

2. Configure babel.config.js:

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'ghuo-design',
        libraryDirectory: 'es',
        style: true,
      },
    ],
  ],
}

3. Import components:

import { Button, Input } from 'ghuo-design'

Manual Import

import Button from 'ghuo-design/es/button'
import 'ghuo-design/es/button/style'

TypeScript Support

Ghuo Design is written in TypeScript and provides complete type definitions:

import { Button, Input } from 'ghuo-design'
import type { ButtonProps, InputProps } from 'ghuo-design'

Browser Support

Ghuo Design supports all modern browsers:

• Chrome >= 60
• Firefox >= 60
• Safari >= 12
• Edge >= 79

Development Setup

If you want to contribute to Ghuo Design or run it locally:

Prerequisites

• Node.js >= 16
• npm >= 7 or yarn >= 1.22

Clone and Install

git clone https://github.com/ghuo-design/ghuo-design.git
cd ghuo-design
npm install

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Run tests
npm run test

# Run linting
npm run lint

Next Steps

• Explore our Component Library
• Learn about Theme Customization
• Check out Design Guidelines
• Join our Community

Need Help?

• Check our FAQ
• Browse GitHub Issues
• Join our Discord Community
• Email us at support@ghuo.cn

Happy coding with Ghuo Design! 🎉