vm-design
v0.0.4
Published
vm design can quickly build interactive interfaces in vue3 applications, which looks good.
Downloads
92
Maintainers
don.xanderReadme
✨ 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 vm-designUse npm install
npm install --save-dev vm-designUse yarn install
yarn add --save-dev vm-design🎉 Quick Start
Put the following code into main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VmDesign from 'vm-design'
import 'vm-design/dist/index.css'
createApp(App).use(VmDesign).mount('#app')🪂 Quick experience
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vm-design/dist/index.css" />
</head>
<body>
<div id="app">
<v-space>
<v-button round type="default">默认按钮</v-button>
<v-button round type="primary">主要按钮</v-button>
<v-button round type="success">成功按钮</v-button>
<v-button round type="danger">危险按钮</v-button>
<v-button round type="warning">警告按钮</v-button>
</v-space>
<v-divider>华丽的分隔线</v-divider>
<v-button type="primary" @click="visible = true">打开 Dialog</v-button>
<v-dialog title="Title" v-model:visible="visible"> 欢迎使用 vm Design！ </v-dialog>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vm-design/dist/index.umd.js"></script>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const visible = ref(false)
return { visible }
}
})
app.use(VmDesign.default)
app.mount('#app')
</script>
</body>🐳 Related links
🌈 Join vm Design
Add WeChat & please note the Github username
💌 Special Thanks
Thanks to everyone who has already contributed to vm Design!