开发 ×
2025年3月13日
Uni-app 使用 firstUI UNI 基础组件库
380 words
/
1'54" read
/
0 views

FirstUI UNI（选项式API）版 是一套基于uni-app开发的组件化、可复用、易扩展、低耦合的跨平台移动端UI 组件库。

安装

通过 npm 安装

npm install firstui-uni

使用 easycome 组件规范，在 pages.json 中 添加配置：

"easycom": {
	"autoscan": true,
	"custom": {
		"fui-(.*)": "firstui-uni/firstui/fui-$1/fui-$1.vue"
	}
}

添加文件

在根目录下添加/common/fui-app.css 和 /common/fui-app.js

文件内容见官方示例文档

引入配置

在 main.js 中添加引入

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

和

Vue.prototype.fui = fui

main.js完整示例：

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

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
Vue.prototype.fui = fui
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.fui = fui;
  return {
    app
  }
}
// #endif

App.vue 示例

<script>
	export default {
		onLaunch: function() { 
			console.log('App Launch')
		},
		onShow: function() {
 
		},
		onHide: function() {
			console.log('App Hide')
		}
	} 
</script>

<style> 
	/*每个页面公共css */
	@import './common/fui-app.css';
</style>
<template>
	<view class="content">
			<fui-button @click="showInfo" text="默认按钮"></fui-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			showInfo() {
				this.fui.toast('click~')
				// console.log('click~')
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
Continue Reading
All Articles
2025年2月8日
2025年7月13日
使用Claude Code Cli 中使用 Kimi-k2
介绍在claude code中使用kimi-k2模型的方法
© 2025 Tylergg