xf-mobile-ui H5端基础组件库

基于 Vue 3 + TypeScript + vite 开发的移动端 H5 组件库，提供丰富的移动端组件和工具函数。

安装说明

环境要求

• Vue 3.x
• Node.js >= 16.0.0
• Vant >= 4.1.1

安装组件库

# 使用 yarn 安装
yarn add xf-mobile-ui

# 或使用 npm 安装
npm install xf-mobile-ui

引入组件库（注意：必须要配置vant）

// main.js 或 main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vant from 'vant'; // 引入 vant 
import 'vant/lib/index.css';
import XfMobileUI from 'xf-mobile-ui';  // 引入 xf-mobile-ui
import 'xf-mobile-ui/dist/style.css';

createApp(App).use(Vant).use(XfMobileUI).use(store).use(router).mount('#app')

或按需引入

// 按需引入单个组件
import { Button, Dialog } from 'xf-mobile-ui'
import 'xf-mobile-ui/dist/style.css'

// 在组件中使用
export default {
  components: {
    Button,
    Dialog
  }
}

使用组件

<template>
  <div>
    <XfButton type="primary" @click="handleClick">点击按钮</XfButton>
    <XfDialog v-model:visible="visible" title="提示">
      这是一个对话框
    </XfDialog>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { XfButton, XfDialog } from 'xf-mobile-ui'
const visible = ref(false);
const handleClick = () => {
  visible.value = true;
};
</script>

开发与发布

开发环境

# 安装依赖
npm i
# 启动开发服务器
npm run dev

构建项目

# 构建示例项目
npm run build

发布流程

1. 更新版本

# 手动更新package.json 版本号

2. 更新日志

# 手动更新 CHANGELOG.md 记录变更内容
# 或使用工具自动生成

3. 构建发布

# 设置源地址
npm config set registry https://registry.npmjs.org/
# 登录
npm login 
# 发布到 npm
npm publish

4. 开发代码推送到git仓库