# 快速上手

开始之前

使用 FirstUI UNIX版前，请确保你已经学习并熟练使用过 uni-app-x (opens new window) 。

# 安装

# 方式一：通过 npm 安装

通过 npm 安装

// # Using npm（目前仅开源组件支持，会员组件需要通过方式二使用）
npm install firstui-unix

1
2

注意

通过 npm 安装的组件，暂时可能无法使用easycom配置，请将 node_modules 文件夹下的 firstui-unix 文件夹整体复制到 uni_modules 文件夹下，如果项目没有 uni_modules 文件夹，在项目根目录创建即可，复制进去即可使用，无需其他配置。

# 方式二：通过下载代码

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

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

// # VIP 代码下载：官网个人中心订单处

1
2
3
4

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

下载 FirstUI unix版本代码，在项目 components/firstui/ 目录下找到需要的组件拷贝到自己的项目中（必须引入的文件请查看注意事项）。

# 如何使用

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

第一种：在页面中引用、注册（建议配置easycom使用）

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

1
2
3
4
5
6

第二种：easycom组件规范

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

在 pages.json 中添加配置，确保路径引入正确：

// 下载安装时easycom配置（注意组件放置位置）
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "@/components/firstui/fui-$1/fui-$1.uvue"
		}
	}

//使用npm安装时easycom配置（配置完成后重新编译运行）
//注意：目前uniapp-x中easycom引入node_modules下文件可能会出现错误，可以将整个 firstui-unix 文件夹拷贝至 根目录 uni_modules（没有可自行创建）文件夹下使用
//（npm下载的）组件放置 uni_modules 下则无需再进行配置easycom
"easycom": {
		"autoscan": true,
		"custom": {
			"fui-(.*)": "firstui-unix/components/fui-$1/fui-$1.uvue"
		}
	}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 使用组件

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

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

# 其他说明

组件示例项目中使用的this.fui.xx 等 api 使用。

/*
   1、将文件 fui-app.uts 引入项目中（示例中路径 common/fui-app.uts）

   2、在根目录main.uts 中 引入 fui-app.uts，并挂载即可使用
   
   3、注意开发工具版本需要升级至 Hbuilder x 3.9.9+
   
   4、目前web端请勿使用，发布时可能会失效，待修复【!important】
*/

import App from './App.uvue'
import fui from './common/fui-app'

import { createSSRApp } from 'vue'

export function createApp() {
	const app = createSSRApp(App)
	//以下代码需要开发工具升级至 Hbuilder x 3.9.9+ (正式版本如果没有则下载alpha版本)
	app.use(function (app) {
		app.config.globalProperties.fui = fui
	})
	return {
		app
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

← 介绍注意事项 →