介绍

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

快速上手

演示项目: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 

下载地址:fant-mini-plus

Tips: 如果需要使用ToastModal组件,则需要安装mp-html以支持富文本功能。

配置

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-plusiconfont

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平台不支持全局挂载组件,故LoadingToastModalDatePicker等组件仍需在SFC中显式使用,例如:

<hd-loading></hd-loading>

部分组件效果

相关文章

基于vue3的uni-app路由库助你实现跳转、传参、拦截等路由功能 - 掘金 (juejin.cn)

支持多平台小程序的uni-app持续集成工具 - 掘金 (juejin.cn)

前端代码提交规范 - 掘金 (juejin.cn)

插件市场地址:点我

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐