# FirstUI **Repository Path**: senkan_1992/FirstUI ## Basic Information - **Project Name**: FirstUI - **Description**: First UI 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。全面兼容App-Nvue、App-vue、小程序（微信、支付宝、百度、字节、QQ）、H5。文档地址：https://doc.firstui.cn - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 24 - **Created**: 2022-04-23 - **Last Updated**: 2022-04-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # First UI 快速上手使用 First UI 前，请确保你已经学习并熟练使用过 [uni-app](https://uniapp.dcloud.io/) 。

### 安装 #### 方式一：通过 npm 安装

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

``` js // # Using npm npm install firstui-uni ``` #### 方式二：通过下载代码

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

``` js // # GitHub git clone https://github.com/FirstUI/FirstUI.git ``` #### 方式三：选择需要的模块引入

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

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

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

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

第二种：easycom组件规范

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

在 `pages.json` 中添加配置： ``` js // 下载安装时配置 "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" } } ```

### 使用组件引入组件后，可以在页面中直接使用组件 ``` html ``` ### 相关链接官网地址：[https://www.firstui.cn](https://www.firstui.cn) 文档地址：[https://doc.firstui.cn](https://doc.firstui.cn) GitHub地址：[https://github.com/FirstUI/FirstUI](https://github.com/FirstUI/FirstUI) ### 其他说明 First UI分为 `开源版` 和 `商业版`，所有示例或文档中加 V 的表示需要开通会员才可获取源码使用，会员内容不会发布到任何公开渠道。开通会员、版权约束说明以及详细介绍请参考 FAQ中 [会员介绍](https://doc.firstui.cn/docs/FAQ.html#%E4%BC%9A%E5%91%98%E4%BB%8B%E7%BB%8D)。 ### 更新日志 #### V1.4.0（2022-03-16） - 新增 Circle 圆形进度条组件（VIP组件）。 - 新增 Skeleton 骨架屏组件（VIP组件）。 - 新增 CubicBezier 贝塞尔曲线组件（VIP组件）。 - 新增 SlideVerify 滑动验证组件（VIP组件）。 - 新增 RotateVerify 旋转验证组件（VIP组件）。 - 新增 SliderCaptcha 滑块拼图验证组件（VIP组件）。 - 新增 OverflowHidden 内容超出隐藏组件（VIP组件）。 - 新增 Backtop 回到顶部组件（VIP组件）。 - 新增 Lazyload 图片懒加载组件（VIP组件）。 - 新增 Waterfall 瀑布流组件（VIP组件）。 - 优化部分组件在vue3下显示异常，控制台报出警告的问题。 - 优化 Upload 图片上传组件。新增属性设置删除图片时是否弹框确认；图片上传数到达限制数max时隐藏选择框。 - 修复 Preview 表单预览组件改变数据页面不更新的bug。 - 优化 Button 按钮组件在Nvue以及PC中的点击效果。 - 优化 Card 卡片组件在Nvue中样式显示不正确的问题。 - 优化 Message 消息提示组件，部分props属性可在show方法中传值覆盖。 - 优化 Select 选择器组件，修复单选时设置默认选中项无效的问题。 - 优化 CountDown 倒计时组件，修复初始化传0触发倒计时结束事件的问题。 - 修复 Layout 栅格布局组件属性gutter不生效的bug。 - 修复 InputNumber 数字输入框组件在vue3下 blur 事件未在emits中申明的问题。 - 优化若干已知问题。 #### V1.3.0（2021-12-31） - 新增 Calendar 日历组件（VIP组件）。 - 新增 Cascader 级联选择器组件（VIP组件）。 - 新增 Slider 滑块组件（VIP组件）。 - 新增 Rate 评分组件（VIP组件）。 - 新增 Select 选择器组件（VIP组件）。 - 新增 Upload 图片上传组件（VIP组件）。 - 新增 Gallery 画廊组件（VIP组件）。 - 新增 BubbleBox 气泡框组件（VIP组件）。 - 新增 BottomNavbar 底部导航栏组件（VIP组件）。 - 新增 CountDown 倒计时组件（VIP组件）。 - 新增 CopyText 长按复制组件（VIP组件）。 - 新增 Timer 计时器组件（VIP组件）。 - 新增 Qrcode 二维码组件（VIP组件）。 - 新增 Barcode 条形码组件（VIP组件）。 - 新增 Autograph 手写签名组件（VIP组件）。 - 修复 Textarea 多行输入框组件回车无法换行的问题。 - 优化 Request 网络请求组件，新增加载中提示信息配置项。 - 优化 Icon 图标组件，新增部分图标。 - 优化若干已知问题。 #### 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组件）。