๐ Fighting Design ๅฏๅจ vue3 ๅบ็จ็จๅบไธญๅฟซ้ๆๅปบไบคไบ็้ข๏ผ็่ตทๆฅ่ฟไธ้ใ(๐ Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.)
Fighting design can quickly build interactive interfaces in vue3 applications, which looks good.
Chinese | English
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
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')
<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>
Add WeChat & please note the Github
username
Thanks to everyone who has already contributed to Fighting Design
!