如何在uni-app项目中使用uView 2.0

本次主要讲解uni-app项目中导入uView 2.0并使用

首先,我们需要打开uview官网

https://www.uviewui.com/

打开之后,我们可以在首页看到这样的话,uView UI,是全面兼容nvue的uni-app生态框架,多平台快速开发的ui框架。

我们点击上面的组件,然后找到安装

官方提供了两种安装方式,我们本次选择从插件市场去安装。

https://ext.dcloud.net.cn/plugin?id=1593

打开之后,我们就可以在插件市场,看到该组件了,然后我们就点击导入该组件

这时候会弹出一个提示框,我们点击打开就行

这样我们的一个uview就导入到项目中了

随后,我们需要配置一下该ui框架

由于uview是非常依赖scss的,所以,我们安装完uview,就需要将scss也进行安装,我这里已经安装了,大家可以在工具-插件安装进行查看

这样我们还需要如下几步就可以轻松使用uview了

首先,需要在main.js中引入uview的主js库

在uni.scss文件中引入uview的全局scss主题文件

我们还需要在app.vue文件中引入uview的基础样式

最后一步就是需要在pages.json文件中配置easycom组件模式

配置完成之后,我们重新跑一下该项目

这样我们在uni-app中使用一下uview提供的组件吧

我是重新创建了一个文件名为data

随后,设置了一下tabBar

这样我们的一个测试页面就出来了

我们引入一下uview的图片组件

我们引入进来之后,我们看一下效果

我们再引入一下车牌号的键盘试一下

看完介绍之后,我们来操作一下

这样我们的uni-app项目使用uview 2.0的介绍就完成了

后期也会更新一些uni-app好用的插件,我们下期再见吧