mx-ui-template

mx_ui_template

基于 Naive UI 二次封装的 Vue 3 UI 组件库模板，可以发布到 npm 使用。

特性

• 📦 开箱即用的 Vue 3 组件
• 🎨 基于 Naive UI 的样式系统
• 🚀 完整的 TypeScript 类型支持
• 🔧 简单易用的 API 设计
• 📱 响应式设计

安装

npm install mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0
# 或
pnpm add mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0
# 或
yarn add mx-ui-template naive-ui@^2.43.0 @vicons/material@^0.13.0 vue@^3.0.0

使用

全局引入

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import MxUI from 'mx-ui-template'
import 'mx-ui-template/style.css' // 这会自动映射到 dist/mx-ui-template.css

const app = createApp(App)
app.use(MxUI)
app.mount('#app')

按需引入

// 导入组件
import { Button, Input, Card } from 'mx-ui-template'
// 导入样式
import 'mx-ui-template/style.css' // 这会自动映射到 dist/mx-ui-template.css

// 在组件中使用
components: {
  Button,
  Input,
  Card
}

组件列表

工具函数

组件库的工具函数已单独打包为 mx-ui-template_utils，可以通过以下方式导入使用：

// 方式1：单独导入utils包
import * as utils from 'mx-ui-template_utils'
// 或者
import utils from 'mx-ui-template_utils'

// 格式化日期
handleDate() {
  const now = new Date()
  const formattedDate = utils.formatDate(now, {
    options: { year: 'numeric', month: 'long', day: 'numeric' }
  })
  console.log(formattedDate) // 输出类似：2024年7月25日
}

// 检查值是否为空
checkEmpty() {
  console.log(utils.isEmpty('')) // true
  console.log(utils.isEmpty({})) // true
  console.log(utils.isEmpty('hello')) // false
}```

### Button 按钮

```vue
<Button>默认按钮</Button>
<Button type="primary">主要按钮</Button>
<Button type="success">成功按钮</Button>
<Button type="warning">警告按钮</Button>
<Button type="error">错误按钮</Button>
<Button type="info">信息按钮</Button>
<Button size="small">小按钮</Button>
<Button size="large">大按钮</Button>
<Button disabled>禁用按钮</Button>
<Button :loading="true">加载按钮</Button>
<Button circle>O</Button>
<Button ghost>幽灵按钮</Button>
<Button dashed>虚线按钮</Button>

Input 输入框

<Input placeholder="请输入内容" />
<Input type="password" placeholder="请输入密码" />
<Input v-model="value" placeholder="双向绑定" />
<Input size="small" placeholder="小尺寸" />
<Input size="large" placeholder="大尺寸" />
<Input readonly placeholder="只读" />
<Input disabled placeholder="禁用" />
<Input maxlength="10" showWordLimit placeholder="带字数限制" />

Card 卡片

<Card title="卡片标题">
  卡片内容
</Card>
<Card title="可关闭卡片" closable @close="handleClose">
  点击右上角关闭按钮可以关闭卡片
</Card>
<Card title="无边框卡片" :bordered="false">
  无边框样式的卡片
</Card>
<Card title="带额外内容的卡片">
  <template #header-extra>
    <Button size="small">操作</Button>
  </template>
  带额外内容的卡片
</Card>

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 修改package.json版本号
npm version patch

# 预览构建结果
npm run preview

# 修改npm源地址为原始地址
npm config set registry https://registry.npmjs.org/

# 发布到 npm
npm run pub

#修改npm源地址为淘宝镜像
npm config set registry https://registry.npmmirror.com/

开发说明

• 组件源码位于 src/components/ 目录下
• 组件类型定义位于 src/types/ 目录下
• 组件样式位于 src/styles/ 目录下
• 演示页面位于 src/App.vue

License

MIT