uni-ui使用方式

最新推荐文章于 2024-06-22 11:44:50 发布
最新推荐文章于 2024-06-22 11:44:50 发布
阅读量2.4k 收藏 6
点赞数 1
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zf118/article/details/108595766
版权
本文介绍了uni-ui在uni-app中的多种使用方式，包括通过HBuilderX创建uni-ui模板项目，利用easycom技术直接使用组件，以及通过npm安装和单独导入组件。在HBuilderX中，可以直接输入u获取组件列表，并通过F1查看组件文档。此外，还提到可以在现有项目中按需单独安装uni-ui组件。
摘要由CSDN通过智能技术生成

uni-ui使用方式
uni ui 支持 HBuilderX直接创建项目模板、npm安装和单独导入个别组件等多种使用方式
1、在HBuilderX新建uni-app项目的模板中，选择uni ui模板 由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue租价。
在代码区输入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。光标放在组件名称上，按F1，可以查阅组件的文档。在这里插入图片描述
2、npm安装
3、单独安装组件，如果没有创建uni-ui项目模板，也可以在你的工程里，单独安装需要的那个组件，下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后无需import和注册，直接使用即可

组件名 说明
Badge 数字角标
Calendar 日历
Card 卡片
Collapse 折叠面板
Combox 可下拉选择的输入框
CountDown 倒计时
Drawer
最低0.47元/天 解锁文章
走在风浪中
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
uni-ui安装初始化
11-23
【uni-ui安装初始化】是关于使用uni-app框架配置并引入uni-ui组件库的主题。uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在多个平台上运行，包括H5、iOS、Android等。而uni-ui则是uni-...
uniapp-ui的使用
最新发布
zsd1987的专栏
07-13 290
输入node -v查看当前是否已经了node开发环境，如果识别不了node命令说明你的电脑还没有安装nodejs开发环境，如果如下图所示说明已经正确安装了node开发环境。uni-ui 是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。在使用uniapp-ui之前需要检测一下你的电脑中是否已经安装了node环境。这是uniapp官方提供的一套UI组件，性能是杠杠的，开发过程中的利器。至此，已经完成了全部的工作了，可以愉快的使用的uniapp-ui啦！
uni-app自定义组件及拓展(uni-ui)组件的使用
weixin_73331644的博客
04-16 1993
UniApp 是一个基于 Vue.js 的跨平台应用框架，可以用来开发同时运行在多个平台（如微信小程序、支付宝小程序、App等）的应用程序。在 UniApp 中，组件的使用与 Vue.js 中的组件使用基本类似，但需要考虑跨平台兼容性。
uni-ui简单入门教程 - 如何用HBuilderX为uni-app项目启用uni-ui扩展组件？
Rudon滨海渔村的博客
01-10 6348
须知 uni-app出品的uni-ui官方手册很坑爹，组件代码是一个文档，展示效果是另一个文档！ 展示效果https://uniapp.dcloud.io/component/uniui/uni-ui 组件代码https://uniapp.dcloud.io/component/view 简单来说，前端框架uni-app的组件，就是类似以前HTML的标签，例如a转navigation、span uni-ui简单入门教程 ...
【前端开发】Uniapp：uni-ui-扩展组件
`雾博客
10-18 1万+
安装sass-loader（使用低于@11.0.0版本，sass-loader@11.0.0不支持vue@2.6.12）：npm i sass-loader@10.1.1 -D 或者 yarn add sass-loader@10.1.1 -D。uni组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。：传统vue组件，需要安装、引用、注册三个步骤后才能使用组件，
uni-app中uni-ui组件库的使用
qq_60976312的博客
02-02 1万+
uni-app中uni-ui组件库的使用
【uni-app系列】uni-ui扩展组件和uViewUI的安装使用
邓邓子的博客
08-30 7480
uni-ui 是 DCloud提供的一个跨端ui库，它是基于 vue组件的、flex布局的、无 dom 的跨全端 ui框架。uni-ui 不包括基础组件，它是基础组件的补充。
hbuildX 开发uni-app 引入组件uni-ui
03-23
1. 安装uni-ui：在项目根目录下，使用npm或yarn安装uni-ui： ``` npm install uni-ui --save 或 yarn add uni-ui ``` 2. 引入组件：在你的vue组件文件中，通过import语句引入所需的uni-ui组件。例如，引入按钮...
uni-app+color-ui+uview-ui 搭建的H5端初始demo
04-09
【标题】"uni-app+color-ui+uview-ui 搭建的H5端初始demo"涉及的关键技术点包括： 1. **uni-app**：uni-app 是由ECharts团队开发的一个跨端框架，允许开发者编写一次代码，可以同时在iOS、Android、Web（H5）、微信...
uni-ui-master.zip
03-21
这就引出了跨端UI框架的重要性，其中“uni-ui-master.zip”是一个典型的例子。它是一个基于uni-app的跨端用户界面框架，旨在帮助开发者高效地创建适应多种设备和平台的Web应用。 uni-app是由Egret Wing团队推出的一...
uni-ui:基于uni-app的ui框架
03-30
uni-ui介绍uni-ui产品特色1.高效目前为止，在小程序和混合应用领域，暂时还没有比uni-ui更高性能的框架。自动差量更新数据虽然uni-app支持小程序自定义组件，所有小程序的ui库都可以用。但小程序自定义组件的ui库都...
uni-app伴生ui组件库uni-ui基础引入使用方法
热门推荐
weixin_45966674的博客
12-26 1万+
帮助想学习使用uniapp开发的朋友更好的理解uni伴生ui插件 便于日后开发更好的寻找和使用资源
uni-ui：基于uni-app的全端兼容高性能UI框架
chenchuang0128的博客
06-13 3569
uni-ui作为一套基于uni-app的全端兼容、高性能UI框架，凭借其独特的产品特点和技术实现，为开发者提供了极大的便利和效率提升。
Uni-UI插件的使用方法指南
2201_75958481的博客
06-22 590
通过本指南，我们希望能够帮助开发者更好地理解Uni-UI插件的集成和使用方法，以及如何利用Uni-UI插件构建出色的Uni-App应用。通过学习和实践，开发者可以更好地利用Uni-UI插件的丰富功能，为用户提供更好的应用体验。
uni-UI
qq_56023114的博客
10-14 382
UI按钮
uni-app扩展组件(uni-ui)
掩月天权的博客
05-30 2043
扩展组件
uni-ui的使用
atu1111的博客
07-28 4424
uni-ui的使用   当uni-app提供的基础组件不够使用时，比如像日历组件是基础组件没有的，这个时候我们就可以从uni-ui中去找我们要的日历组件，uni-ui类似于elemnet，antd vue一样是个组件库。   uni-ui官方文档   1、进入日历宫格组件   2、使用HBuilderX导入该组件   3、导入该组件 import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-cal
使用uni-ui编写登录界面
04-05
1. 首先需要在项目中安装uni-ui插件，可以通过HBuilderX的插件市场进行安装。 2. 创建一个新页面，命名为login.vue。 3. 在login.vue中引入uni-ui的组件库，可以通过以下方式引入： ``` <template> <view> <uni-list> <uni-list-item> <uni-icon type="username"></uni-icon> <uni-input placeholder="请输入用户名"></uni-input> </uni-list-item> <uni-list-item> <uni-icon type="password"></uni-icon> <uni-input placeholder="请输入密码" password></uni-input> </uni-list-item> <uni-list-item> <uni-button type="primary" full>登录</uni-button> </uni-list-item> </uni-list> </view> </template> <script> import uniList from '@/components/uni-list/uni-list.vue' import uniListItem from '@/components/uni-list-item/uni-list-item.vue' import uniIcon from '@/components/uni-icon/uni-icon.vue' import uniInput from '@/components/uni-input/uni-input.vue' import uniButton from '@/components/uni-button/uni-button.vue' export default { components: { uniList, uniListItem, uniIcon, uniInput, uniButton } } </script> ``` 4. 在login.vue中编写逻辑代码，可以通过uni-app提供的API进行登录验证等操作。 ``` <script> import uniList from '@/components/uni-list/uni-list.vue' import uniListItem from '@/components/uni-list-item/uni-list-item.vue' import uniIcon from '@/components/uni-icon/uni-icon.vue' import uniInput from '@/components/uni-input/uni-input.vue' import uniButton from '@/components/uni-button/uni-button.vue' export default { components: { uniList, uniListItem, uniIcon, uniInput, uniButton }, methods: { login() { // 获取用户名和密码 let username = this.$refs.username.value let password = this.$refs.password.value // 进行登录验证 if (username === 'admin' && password === '123456') { uni.showToast({ title: '登录成功' }) // 跳转到首页 uni.navigateTo({ url: '/pages/index/index' }) } else { uni.showToast({ title: '用户名或密码错误' }) } } } } </script> ``` 5. 在login.vue中给登录按钮添加点击事件，调用login方法进行登录验证。 ``` <template> <view> <uni-list> <uni-list-item> <uni-icon type="username"></uni-icon> <uni-input placeholder="请输入用户名" ref="username"></uni-input> </uni-list-item> <uni-list-item> <uni-icon type="password"></uni-icon> <uni-input placeholder="请输入密码" password ref="password"></uni-input> </uni-list-item> <uni-list-item> <uni-button type="primary" full @click="login">登录</uni-button> </uni-list-item> </uni-list> </view> </template> <script> import uniList from '@/components/uni-list/uni-list.vue' import uniListItem from '@/components/uni-list-item/uni-list-item.vue' import uniIcon from '@/components/uni-icon/uni-icon.vue' import uniInput from '@/components/uni-input/uni-input.vue' import uniButton from '@/components/uni-button/uni-button.vue' export default { components: { uniList, uniListItem, uniIcon, uniInput, uniButton }, methods: { login() { // 获取用户名和密码 let username = this.$refs.username.value let password = this.$refs.password.value // 进行登录验证 if (username === 'admin' && password === '123456') { uni.showToast({ title: '登录成功' }) // 跳转到首页 uni.navigateTo({ url: '/pages/index/index' }) } else { uni.showToast({ title: '用户名或密码错误' }) } } } } </script> ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值