fz-design

✨ 特性

• 🪐 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>

🐳 相关链接

• 官方文档
• NPM
• 贡献指南
• 更新日志

💬 执照

MIT