https://github.com/fightingdesign/fighting-design

🌈 Fighting Design 可在 vue3 应用程序中快速构建交互界面，看起来还不错。(🌈 Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.)
https://github.com/fightingdesign/fighting-design

componets css3 design es6 eslint fighting fighting-design javascript js rollup sass setup ts typescript vite vitejs vitepress vitest vue3 vuejs

Last synced: 5 days ago
JSON representation

🌈 Fighting Design 可在 vue3 应用程序中快速构建交互界面，看起来还不错。(🌈 Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.)

• Host: GitHub
• URL: https://github.com/fightingdesign/fighting-design
• Owner: FightingDesign
• License: mit
• Created: 2022-06-03T16:04:48.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-09-10T12:30:53.000Z (4 months ago)
• Last Synced: 2024-10-29T15:19:17.185Z (3 months ago)
• Topics: componets, css3, design, es6, eslint, fighting, fighting-design, javascript, js, rollup, sass, setup, ts, typescript, vite, vitejs, vitepress, vitest, vue3, vuejs
• Language: TypeScript
• Homepage: https://fighting.tianyuhao.cn
• Size: 90 MB
• Stars: 564
• Watchers: 11
• Forks: 164
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.en-US.md
  • Contributing: CONTRIBUTING.en-US.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        


  

  
Fighting Design




  Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.





  Chinese | English 





  

  

  

  



## ✨ Features

- 🪐 60+ common components

- 💪 Developed with the latest features of Vue.js

- 🐆 Fully based on Vite, fast enough

- 🤟 Ultimate development experience

- 🥇 Ultra detailed JSDoc comments

- 🦩 Zero third party dependency

- 🪐 Different packaging modes which compatible with different projects

- 🏆 Support full import and on-demand import

- ✅ Written with TypeScript & Template

- 🖍️ Strict TypeScript Type

- ✔️ Easy to configure and easy to use

- 🚩 Complete and adequate unit tests

- 👍 Maintained by the community team

- ❤️ Developed according to actual demand

- 📃 High quality detailed documentation

- ☝️ Put forward demands and keep improving

- 🌍 More configuration options & flexible components

- 🛠 More features are under development

## 🔑 Install

Use `pnpm` install

```shell

pnpm add --save-dev fighting-design

```

Use `npm` install

```shell

npm install --save-dev fighting-design

```

Use `yarn` install

```shell

yarn add --save-dev fighting-design

```

## 🎉 Quick Start

Put the following code into `main.ts`

```ts

import { createApp } from 'vue'

import App from './App.vue'

import FightingDesign from 'fighting-design'

import 'fighting-design/dist/index.css'

const app = createApp(App)

app.use(FightingDesign)

app.mount('#app')

```

## 🪂 Quick experience

```html

  

  


    

      默认按钮

      主要按钮

      成功按钮

      危险按钮

      警告按钮

    


    华丽的分隔线

    打开 Dialog

    

      欢迎使用 Fighting Design！

    

  


  

  

  

    const { createApp, ref } = Vue

    const app = createApp({

      setup() {

        const visible = ref(false)

        return { visible }

      }

    })

    app.use(FightingDesign.default)

    app.mount('#app')

  

```

## 🐳 Related links

- [Official documents](https://fighting.tianyuhao.cn)

- [NPM](https://www.npmjs.com/package/fighting-design)

- [CONTRIBUTING](https://github.com/FightingDesign/fighting-design/blob/master/CONTRIBUTING.md)

- [CHANGELOG](https://github.com/FightingDesign/fighting-design/blob/master/CHANGELOG.md)

## 🌈 Join Fighting Design

Add WeChat & please note the `Github` username



## 💌 Special Thanks

Thanks to [everyone](https://github.com/FightingDesign/fighting-design/graphs/contributors) who has already contributed to `Fighting Design`!



  



## 💬 LICENSE

[MIT](https://github.com/FightingDesign/fighting-design/blob/master/LICENSE)