介绍

<p align="center">
<img alt="logo" src="http://historysoa.oss-cn-hongkong.aliyuncs.com/fant-mini-plus/logo.png" width="120" height="120" style="margin-bottom: 10px;border-radius:30%;overflow:hidden">
</p>

<h1 align="center">FANT-MINI-PLUS</h1>

<p align="center">一个适用于 uni-app 平台的基于 vue3 的前端UI框架</p>

FantMiniPlus是一个基于Vue3和TypeScript的uni-app高效UI组件库，支持vue3组合式API，提供丰富的组件和样式，帮助开发者快速构建高质量的移动应用。

官方文档：https://fant-mini-plus.top

插件市场地址：点我

开发计划（规划中）

关于开发计划的问题或者建议请先到Gitee或者Github提出issue，或者在评论区发表评论，方便我记录问题以及安排后续的开发计划。（组件或者模板使用上有什么问题，希望增加什么组件或者模板页面都可以提）

预览

扫描下方小程序码，体验演示示例:

<p align="center" style="display:flex;justify-content:space-between">
<img alt="logo" src="http://historysoa.oss-cn-hongkong.aliyuncs.com/fant-mini-plus/miniprogram.jpg" width="240" height="240" style="margin-bottom: 10px;border-radius:30%;overflow:hidden">
<img alt="logo" src="http://historysoa.oss-cn-hongkong.aliyuncs.com/fant-mini-plus/alipay.png" width="240" height="240" style="margin-bottom: 10px;border-radius:30%;overflow:hidden">
</p>

快速上手

演示项目:Vue3-Uni-TS-Template基础模板

介绍

通过本章节你可以了解到 fant-mini-plus 的安装方法和基本使用姿势。

uni_modules

安装

fant-mini-plus 支持 uni_modules 规范，已经上架到 uni-app 的插件市场，故我们推荐使用 uni_modules 的方式引入，方便更新。

在uni-app插件市场选择使用HBuildX导入，或者选择手动在src目录下创建uni_modules文件夹并将fant-mini-plus解压到uni_modules中，结构如下:

- uni_modules  
- - - fant-mini-plus 

下载地址：<a href="https://ext.dcloud.net.cn/plugin?id=11489">fant-mini-plus</a>

Tips: 如果需要使用Toast和Modal组件，则需要安装<a href="https://ext.dcloud.net.cn/plugin?id=805"><span >mp-html</span></a>以支持富文本功能。

配置

1. 引入组件

import { createSSRApp } from 'vue'  
import fantMini from '@/uni_modules/fant-mini-plus'  
import App from './App.vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  app.config.warnHandler = () => null  
  app.use(fantMini)  
  return {  
    app  
  }  
}  

2. 引入fant-mini-plus的主题文件

在uni.scss中引入theme.scss。

/* uni.scss */  
@import "@/uni_modules/fant-mini-plus/libs/css/theme.scss";

3. 安装sass（如果项目中已经安装sass或者node-sass则此步骤可以忽略）

fant-mini-plus使用scss作为css预编译器，故需在项目中引入，否则无法运行。

# 安装sass  
yarn add sass -D    
# 安装sass-loader  
yarn add sass-loader -D

4. 引入fant-mini-plus的iconfont

在App.vue中引入iconfont相关文件。

/* App.vue */  
<style>  
@import '@/uni_modules/fant-mini-plus/libs/iconfont/iconfont.css';  
</style>

5. 使用

完成前四步之后就可以开始使用fant-mini-plus了。fant-mini-plus的组件支持easycom规范，故可以直接在.vue中使用，无需在页面内import，也不需要在components内声明，即可在任意页面使用。值得注意的是，uni-app平台不支持全局挂载组件，故Loading、Toast、Modal、DatePicker等组件仍需在SFC中显式使用，例如:

<hd-loading></hd-loading>

单独引入

有些伙伴希望可以只引入组件库的其中一个或几个组件，所以这里提供了可以单独引入的组件列表

部分组件效果

<img src="https://fant-mini-plus.top/gif/calendar.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/circle.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/countdown.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/datepicker.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/keyboard.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/modal.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/notify.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/progress.gif" width="330" height="auto">

<img src="https://fant-mini-plus.top/gif/steper.gif" width="330" height="auto">