Git Product home page Git Product logo

jedediahxu / fighting-design Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fightingdesign/fighting-design

2.0 0.0 1.0 19.71 MB

๐ŸŒˆ Fighting Design ๅฏๅœจ vue3 ๅบ”็”จ็จ‹ๅบไธญๅฟซ้€Ÿๆž„ๅปบไบคไบ’็•Œ้ข๏ผŒ็œ‹่ตทๆฅ่ฟ˜ไธ้”™ใ€‚(๐ŸŒˆ Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.)

Home Page: https://fighting.tianyuhao.cn

License: MIT License

Shell 0.02% JavaScript 2.30% TypeScript 52.73% HTML 0.10% Vue 32.78% SCSS 12.08%

fighting-design's Introduction

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
  • ๐ŸคŸ Global no any 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
  • ๐Ÿ“Œ Improve RFC
  • โ˜๏ธ 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'

createApp(App).use(FightingDesign).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

fighting-design's People

Contributors

alphatrionty avatar bullshitking-99 avatar davidqinqianwu avatar ding139725 avatar godwei123 avatar gzlibiao avatar holdingtheghostatthegrave avatar hyzihong avatar jardeng avatar jaymedotdot avatar jedediahxu avatar jettsang avatar jtr354 avatar jxzho avatar keer-tea avatar kongyich avatar laine001 avatar lxqddd avatar lzyaom avatar simon-he95 avatar tanhh326 avatar tyh2001 avatar unnm avatar wang-zhixin avatar wmasfoe avatar wuxin0011 avatar xiaoli-sach avatar xluoyu avatar yn22638 avatar yzj940619 avatar

Stargazers

 avatar  avatar

Forkers

shadoweditor

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.