Fz Design
Fz Design 可在 vue3 应用程序中快速构建交互界面，旨在简单高效，依赖单一。
中文 | English
✨ 特性
- 🪐 50+ 常用组件
- 🌍 国际化
- 🌛 明暗主题
- 💪 使用 Vue.js 最新特性开发
- 🐆 全面基于 Vite，速度够快
- 🤟 极致的开发体验
- 🥇 超详细的 JSDoc 注释
- 🦩 零第三方依赖
- ✂️ 完善的代码提示
- 🪐 不同打包模式，兼容不同项目
- 🏆 支持完整引入和按需引入
- ✅ 使用 TypeScript + Template 编写
- 🖍️ 严格的 TypeScript 类型
- ✔️ 配置简单，上手容易
- 🚩 单元测试
- 📃 优质详细的文档
- 📌 完善 RFC
- 🛠 更多特性开发中
🔑 安装
使用 pnpm 安装
pnpm add --save-dev fz-design使用 npm 安装
npm install --save-dev fz-design使用 yarn 安装
yarn add --save-dev fz-design🎉 快速上手
在 main.ts 中引入下面内容
import { createApp } from 'vue'
import App from './App.vue'
import FzDesign from 'fz-design'
import 'fz-design/dist/index.css'
createApp(App).use(FzDesign).mount('#app')🪂 快速体验
<head>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/fz-design/dist/index.css"
/>
</head>
<body>
<div id="app">
<fz-button round type="default">默认按钮</fz-button>
<fz-divider>华丽的分隔线</fz-divider>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fz-design/dist/index.umd.js"></script>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const visible = ref(false)
return { visible }
}
})
app.use(FzDesign.default)
app.mount('#app')
</script>
</body>