fighting-design

Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
168,546 559
vite setup typescript vuejs vue3 ui components javascript design css fighting fighting-design
Install
npm install fighting-design@0.67.4
Latest Version:0.67.4
Older releases:3
License:MIT
Last Updated:Sep 10, 2024
Links: GitHub  ·  npm
Maintainer: tyh2001

✨ 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

pnpm add --save-dev fighting-design

Use npm install

npm install --save-dev fighting-design

Use yarn install

yarn add --save-dev fighting-design

🎉 Quick Start

Put the following code into main.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

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/fighting-design/dist/index.css"
  />
</head>

<body>
  <div id="app">
    <f-space>
      <f-button round type="default">默认按钮</f-button>
      <f-button round type="primary">主要按钮</f-button>
      <f-button round type="success">成功按钮</f-button>
      <f-button round type="danger">危险按钮</f-button>
      <f-button round type="warning">警告按钮</f-button>
    </f-space>

    <f-divider>华丽的分隔线</f-divider>

    <f-button type="primary" @click="visible = true">打开 Dialog</f-button>
    <f-dialog title="Title" v-model:visible="visible">
      欢迎使用 Fighting Design！
    </f-dialog>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/fighting-design/dist/index.umd.js"></script>
  <script>
    const { createApp, ref } = Vue

    const app = createApp({
      setup() {
        const visible = ref(false)

        return { visible }
      }
    })

    app.use(FightingDesign.default)
    app.mount('#app')
  </script>
</body>

🐳 Related links

🌈 Join Fighting Design

Add WeChat & please note the Github username

💌 Special Thanks

Thanks to everyone who has already contributed to Fighting Design!

💬 LICENSE

MIT

Related Packages

@wu-web/fighting-design

Fighting design can quickly build interactive interfaces in vue3 applications, w...

6,379 559
components css design fighting fighting-design javascript setup typescript ui vite +2
t-fighting-design

Fighting design can quickly build interactive interfaces in vue3 applications, w...

4,546 559
components css design fighting fighting-design javascript setup typescript ui vite +2
fz-design

fz-design

41,384
components css design javascript setup typescript ui vite vue3 vuejs +2
dk-plus

DK-PLUS

24,615 45
components css ui vite vue3 vuejs dk-plus
wisestar-ui

A Vue 3 Component Library. The next generation ui component library of wisestar-...

1,220 4
css javascript setup vue3 composition api html wisestar-ui

Version History

Version Released License
0.67.4 MIT
0.67.3 MIT
0.67.2 MIT
0.67.1 MIT
0.67.0 MIT
Pre-releases (89)
Version Released License
1.0.1-alpha.1 MIT
1.0.0-alpha.9 MIT
1.0.0-alpha.8 MIT
1.0.0-alpha.7 MIT
1.0.0-alpha.6 MIT