【若依前后端分离+app】第三篇--app中引入uview-ui框架

认识uview-ui

uview，是uni-app生态专用的UI框架，全面的组件和便捷的工具会让你信手拈来，如鱼得水；是一个基于 Vue.js 的开源 UI 框架，它提供了丰富的组件和样式，可以快速搭建高质量的应用程序界面。

优点：

多端兼容：支持多端开发，包括微信小程序、支付宝小程序、H5、App 等多个平台。

丰富的组件：提供了丰富的组件，包括常用的按钮、表单、列表、导航、布局等等。

精美的样式：样式设计精美，可以为应用程序增添不少美观度。

功能强大：提供了很多实用的功能，如国际化、主题定制、字体图标、状态管理等等。

简单易用：组件和 API 非常简单易用，可以快速上手并使用。

uview-ui引入步骤

1、下载uview-ui包，放到项目中

 uView的下载安装可参考：

安装 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)

2、在main.js中配置

import uView from 'uview-ui';
Vue.use(uView);

3、在app.vue中引入

<style lang="scss">
  @import '@/static/scss/index.scss';
  @import '@/uview-ui/index.scss';
  
</style>

4、在uni.scss中引入

@import "uview-ui/theme.scss";
@import "uview-ui/index.scss";

uview-ui的使用

1、丰富的组件，可参考文档：

快速上手 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)

下例：表单

用法简单，有教程的 

2、便捷的工具库，可参考文档

介绍 | uView - 多平台快速开发的UI框架 - uni-app UI框架 (gitee.io)

我尝试用的是test规则校验，简单有效。有各种常用的校验规则，如手机号、邮箱号、url、是否为整数，是否是汉字等很多校验规则。

例如：是否为手机号，返回true或false

console.log(this.$u.test.mobile('13845678900'));

希望对大家有用！