uniapp第三方组件库 - uview

3,389 阅读1分钟

uView是一款基于uni-app开发的UI库,它提供了一套完整的组件库和丰富的样式库,使开发者可以快速构建出漂亮、丰富的多平台应用。uView的特点包括:

  1. 组件丰富。uView提供了大量易用的组件,包括常用的按钮、表单、卡片、列表、样式元素等。
  2. 样式灵活。uView集成了大量样式工具和模板,可以根据需要快速生成响应式、美观的界面。
  3. 多平台兼容。uView针对多个端提供了优化,并且支持使用了解构成员和the …rest操作符的特殊的ES6语法。
  4. 完善的文档。uView提供了详尽的中文文档和示例,方便开发者学习和使用。

总之,uView是一个优秀的基于uni-app的开源UI库,可以大大提高开发效率,降低开发成本。如果你已经学习了uni-app并且需要一个好用的UI库,那么uView是非常值得尝试的选择。

如何使用

  1. 引入uView主JS库

在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
  1. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. 引入uView基础样式

注意!在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性


<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

4.开始使用组件

<view style="padding: 20px;">
		<u-button type="primary" text="确定"></u-button>
		<u-button type="primary" :plain="true" text="镂空"></u-button>
		<u-button type="primary" :plain="true" :hairline="true" text="细边"></u-button>
	</view>

官方文档: 介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (uviewui.com)