uni-app引入uView组件

1,152 阅读2分钟

「这是我参与2022首次更文挑战的第25天,活动详情查看:2022首次更文挑战

前言

关于uView名字,首字母u来自于uni-app首字母,uni-app是基于Vue.jsVueView(延伸为UI、视图之意)同音,同时view组件是uni-app中 最基础,最重要的组件,故取名uView,表达源于uni-appVue之意,同时在此也对它们表示感谢。

uni-app插件市场 ext.dcloud.net.cn/。这里面为我们开发者提供了一个平台,上传开源自己的插件给别人使用,生态发展到现在已经很庞大了,这一篇介绍一个比较完善的开源插件,受欢迎程度比较高。

uVIew组件

安装步骤

安装方式有2种,下载安装和npm安装,本文主要介绍下载安装。

在插件市场搜索可以看到介绍,下载量36万+,非常的高,说明很多人使用,经过实际考验,我们可以直接使用。

点进去选择使用导入HbuildX导入插件,然后选择导入到对应的项目即可。

看到uni_modules显示已经把uview-ui导入进来了。

接着在引入main.js文件引入 uVIew,

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

在项目根目录uni.scss引入

@import '@/uni_modules/uview-ui/theme.scss';

然后重新编译,即可在代码里正常使用uview的各个组件了,并且hbuildx有代码提示,能让开发者快速上手。

注意事项

注意:
根据官方文档说明,uview的使用是依赖于scss,所以HBuilder中需要安装scss插件;

插件安装方式

选择工具-插件安装

这是我安装好了的,没有的话,就到安装新插件找到对应的插件即可,安装完按提示重启。

总结

uView目前已经更新到2.0文档,作者也是不断更新,修复bug,非常良心。

官方地址 www.uviewui.com/components/…,这里是官网给的教程,包含了所有组件的介绍,使用方式,还有官方的demo,如果我们确定使用这个框架,教程是一定要看的。

同时uView采用MIT许可证,您可以免费自由使用,文档和源码开源免费,不收任何费用!