torns/FirstUI

First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序（微信、支付宝、百度、字节、QQ）、H5。文档地址：https://doc.firstui.cn

First UI 快速上手

使用 First UI 前，请确保你已经学习并熟练使用过 uni-app 。

安装

方式一 ：通过 npm 安装

使通过 npm 安装，需要先通过 vue-cli 创建 uni-app 项目，详见 。

// # Using npm
npm install firstui-uni

方式二 ：通过下载代码

通过 GitHub 或者 FirstUI官网(VIP) 下载 First UI 的代码，然后 将 components/firstui/ 目录拷贝到自己的项目中。

// # GitHub
git clone https://github.com/FirstUI/FirstUI.git

方式三 ：选择需要的模块引入

下载 First UI 的代码，在 components/firstui/ 目录下找到需要的组件拷贝到自己的项目中。

如何使用

按照以下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看。

第一种：在页面中引用、注册

import fuiButton from "@/components/firstui/fui-button/fui-button"
export default {
	components:{
		fuiButton
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步，如果不了解easycom，可先查看 官网文档 。

在 pages.json 中 添加配置：

// 下载安装时配置
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "@/components/firstui/fui-$1/fui-$1.vue"
		}
	}

// 使用npm安装时配置（配置完成后重新编译运行）
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"
		}
	}

使用组件

引入组件后，可以在 页面 中直接使用组件

<fui-button text="默认按钮"></fui-button>

相关链接

官网地址：https://www.firstui.cn

文档地址：https://doc.firstui.cn

GitHub地址：https://github.com/FirstUI/FirstUI

其他说明

First UI分为 开源版 和 商业版，所有示例或文档中加 V 的表示需要开通会员才可获取源码使用，会员内容不会发布到任何公开渠道。

开通会员、版权约束说明以及详细介绍请参考 FAQ中 会员介绍。

更新日志

V1.2.0（2021-11-22）

• 新增 Tabbar 标签栏 组件（VIP组件）。

• 新增 ActionSheet 上拉菜单 组件。

• 新增 Toast 轻提示 组件。

• 新增 Dialog 对话框 组件。

• 新增 DropdownMenu 下拉菜单 组件。

• 新增 DropdownList 下拉菜单 组件。

• 新增 Modal 模态框 组件（VIP组件）。

• 新增 Landscape 压屏窗 组件（VIP组件）。

• 新增 Message 消息提示 组件（VIP组件）。

• 新增 BottomPopup 底部弹出层 组件。

• 新增 TopPopup 顶部弹出层 组件。

• 新增 Drawer 抽屉 组件。

• 新增 NoticeBar 通告栏 组件（VIP组件）。

• 新增 TimeAxis 时间轴 组件（VIP组件）。

• 新增 Steps 步骤条 组件（VIP组件）。

• 新增 Progress 进度条 组件（VIP组件）。

• 新增 Collapse 折叠面板 组件。

• 新增 SwiperDot 轮播图指示点 组件（VIP组件）。

• 新增 DigitalRoller 数字滚轮 组件（VIP组件）。

• 新增 DigitalKeyboard 数字键盘 组件（VIP组件）。

• 新增 LicensePlate 车牌号键盘 组件（VIP组件）。

• 新增 CountdownVerify 验证码倒计时 组件（VIP组件）。

• 新增 Sticky 吸顶容器 组件（VIP组件）。

• 新增 Fab 浮动按钮 组件（VIP组件）。

• 新增 ShareSheet 分享面板 组件（VIP组件）。

• 新增 FilterBar 筛选栏 组件（VIP组件）。

• 新增 SwipeAction 滑动菜单 组件。

• 新增 Picker 选择器 组件（VIP组件）。

• 新增 DatePicker 日期时间选择器 组件（VIP组件）。

• 新增 门户模板（物料）。

• 优化掉部分组件中对头条小程序做兼容的冗余代码。

• 优化若干已知问题。

V1.1.0（2021-09-07）

• 调整组件对vue3支持与uni-app官方一致。

• 新增 Panel 面板 组件（VIP组件）。

• 新增 Preview 表单预览 组件（VIP组件）。

• 新增 Empty 缺省页 组件。

• 新增 SegmentedControl 分段器 组件。

• 新增 Pagination 分页器 组件。

• 新增 NavBar 导航栏 组件（VIP组件）。

• 新增 Tabs 标签页 组件。

• 新增 Tag 标签 组件。

• 新增 Backdrop 遮罩层 组件。

• 新增 Result 结果页 组件（VIP组件）。

• 新增 Avatar 头像 组件。

• 新增 Form 表单校验 组件（VIP组件）。

• 新增 Validator 表单验证（JS）组件（VIP组件）。

• 新增 SingleInput 单输入框 组件（VIP组件）。

• 新增 IndexList 索引列表 组件（VIP组件）。

• 新增 SearchBar 搜索栏 组件（VIP组件）。

• 新增 登录（A）模板（物料）。

• 新增 登录（B）模板（物料）。

• 新增 登录（C）模板（物料）。

• 新增 登录（D）模板（物料）。

• 优化若干已知问题。

V1.0.0（2021-08-02）

• 新增 Color 色彩 ，First UI用色指南。

• 新增 Icon 图标 组件，First UI字体图标库。

• 新增 Button 按钮 组件。

• 新增 Footer 页脚 组件。

• 新增 Animation 动画 组件。

• 新增 StatusBar 状态栏 组件。

• 新增 Layout 栅格布局 组件（fui-row和fui-col）。

• 新增 Grid 宫格 组件（fui-grid和fui-grid-item）。

• 新增 List 列表 组件（fui-list和fui-list-cell）。

• 新增 Card 卡片 组件。

• 新增 Input 输入框 组件。

• 新增 InputNumber 数字输入框 组件。

• 新增 Label 标签 组件。

• 新增 FormField 表单数据传递 组件（微信/百度/QQ小程序）。

• 新增 Radio 单选框 组件。

• 新增 Checkbox 复选框 组件。

• 新增 Switch 开关 组件。

• 新增 Textarea 多行输入框 组件。

• 新增 Loading 加载 组件。

• 新增 LoadAni 加载动画 组件（VIP组件）。

• 新增 Badge 徽章 组件。

• 新增 Alert 警告框 组件。

• 新增 Divider 分割线 组件。

• 新增 LoadMore 加载更多 组件。

• 新增 Clipboard 复制文本 组件（VIP组件）。

• 新增 Request 网络请求 组件（VIP组件）。

• 新增 Utils 工具 类组件。

• 新增 Poster 绘制分享海报 组件（VIP组件）。