# 框架介绍 FirstUI组件库，新一代多端UI组件库。丰富组件，快速上手，为你的项目加速。一套代码，多端适用。支持微信小程序、QQ小程序、百度小程序、支付宝小程序、字节小程序还可以通过uniapp打包成安卓、苹果APP。 # 漂亮的标准使用模板登录模板 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/09629edc17c54bac8b52cacb5883e172~tplv-k3u1fbpfcp-watermark.image?) 打卡签到模板 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/29837f0e901c4b759311ef67dbf252dc~tplv-k3u1fbpfcp-watermark.image?) 新闻模板 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6097ab87f8454c41a78a8b0dcf0b9a8a~tplv-k3u1fbpfcp-watermark.image?) # 快速预览 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0dd3a430a25402494ec984ab5ed4276~tplv-k3u1fbpfcp-watermark.image?) # First UI 快速上手使用 First UI 前，请确保你已经学习并熟练使用过 [uni-app](https://uniapp.dcloud.io/) 。

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

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

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

通过 FirstUI官网下载 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/login?reccode=124) 文档地址：[https://doc.firstui.cn](https://doc.firstui.cn)