uniapp引入uview的ui库[从hbuild创建项目--到引入使用看到效果 23张图片引导]

原创 已于 2022-04-02 08:38:03 修改 · 2.2k 阅读 · 6
于 2022-04-01 11:16:57 首次发布
本文介绍了如何使用HBuilder创建uniapp项目，并详细阐述了uview UI库的安装、配置和使用过程，包括在main.js中引入JS库、配置SCSS以及在项目中应用组件。通过23张图片辅助说明，帮助读者直观理解操作步骤。

uniapp引入uview的ui库

一. 项目的创建

1.使用hbuilder创建项目

在这里插入图片描述
在新建中选择项目的选项

2.创建uniapp的项目

在这里插入图片描述
建议 选择默认模板

3.创建完成后的项目结构

在这里插入图片描述

二 . uview的代码导入到项目

1.找到uview的官网—找到安装[hbuild安装方式]

可以使用下方的网址

https://www.uviewui.com/components/install.html

在这里插入图片描述

2.进入下载地址

在这里插入图片描述

3.导入uview的UI库

在这里插入图片描述

4.选择要导入的项目

在这里插入图片描述

5.导入后的项目结构变化

在这里插入图片描述

三 . 项目中注册uview的功能

1.点击安装配置

在这里插入图片描述
在uview 官网的安装中选择 hbuild方式
点击在注意中的 安装配置

2.scss的配置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述<

标签
#javascript #css #html #小程序
最低0.47元/天 解锁文章
Vue.js组件tree实现无限级树形菜单
10-20
主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【Vue入门实践】Element-UI 树形组件el-tree的组件封装 =＞实现组织机构树Tree =＞ 使用vue-content-menu定制可编辑树结构editableTree
Sabrina_cc的博客
12-03 2万+
本文主要讲解了基础Element-ui中el-tree组件的使用，包括对组织机构树的组件封装，使用组织机构树进行查询，以及使用vue-content-menu修改editableTree
uview的collapse组件实现一键展开，收回功能（修改value，组件展开功能不生效问题踩坑）
weixin_42190844的博客
07-27 6189
uview使用collapse修改value，展开收回效果不生效
vue+iviewUI树形结构tree多选，编辑时重新勾选选中的数据，不渲染页面
wang_59881的博客
08-19 2170
vue+iviewUI树形结构tree多选，编辑时重新勾选选中的数据，不渲染页面
uniapp 手写折叠面板展示树形结构
微光无限的博客
07-01 2072
uniapp 手写折叠面板展示树形结构
通过iview组件库渲染树形结构tree
热门推荐
weixin_55894946的博客
11-24 3万+
来完成，但是需求有可能要实现的功能不一样，我本次开发的需求不仅是渲染出树形的组织结构，还要有相应的。引用这三步之后，只需要把里面的功能做出改动以及下拉菜单的点击事件做出改动即可。在很多后台管理项目中，我们都会遇到要开发与。相关的需求，此时我们基本都要用到。
如何在uniapp中使用uviewUI-适合uniapp的ui组件
商务合作 / 项目定制开发 / 前端一对一培训、答疑
12-04 4869
uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。a、先打开uview的插件地址：https://ext.dcloud.net.cn/plugin?c、导入后，在弹出的对话框中选择要导入的项目，这样就会在该项目中自动生成一个。a、在引入uView的全局SCSS主题文件。在main.js中引入。
【uni-app项目如何引入 uView组件库】
Lnbd_的博客
03-12 6771
uniapp项目引入uView组件库
TreeView树状结构
随心更博
01-15 2577
做OA系统，权限控制部分用到了树状结构，通过勾选来为不同的用户分配权限。      通过点击“+”对树展开或者折叠，我们这里使用了封装好的jquery.treeview.js来实现树状结构的功能； 主体代码： 系统管理 部门管理 岗位管理 岗位添加 岗位删除
Vue中实现 将数组转换为树形结构的两种方法
FellAsleep的博客
03-15 1万+
第一种:递归实现数组转为树形结构 第一步: // 递归: 封装一个函数:将列表list数据转换成数据树形数据=>递归 // 遍历树形 有一个重点 要先找一个头 function transListDataToTreeData(list, root) { const arr = [] // 1.遍历 list.forEach((item) => { // 2.首次传入空字符串 判断list的pid是否为空 如果为空就是一级节点 if (item.pid ==...
Vue iview Tree组件实现文件目录-高级实现
izhaong
06-04 3116
Tree组件实现文件目录-基础实现 封装文件目录组件 src\views\folder-tree\folder-tree.vue <template> <div class="folder-wrapper"> <folder-tree :folder-list="folderList" :file-list="fileList"/> &...
Vue基础知识总结 5：vue实现树形结构
学Java，找哪吒
07-07 1万+
一、前言 开发过程中，涉及到多级菜单的应用，树形结构比较常见，今天就做了一个Spring Boot + Vue + Element-UI 实现树形结构的一个小demo。 Tree组件最适合的结构是无序列列表ul，创建一个递归组件Item表示Tree选项，如果当前Item存在 children，则递归渲染子树，以此类推;同时添加一个标识管理理当前层级item的展开状态。 效果展示： 二、代码实例 1、数据库设计 2、实体类 一般树形结构都是创建若干层实体类，然后通过list结合在一起，面
VUE-开发一个树形结构组件（组件递归）
课后笔记
12-08 1万+
需求 一个页面，要显示商品分类，同时每个分类下面还拥有若干子类，子类也可以有子类。 要实现全选单选，子类被逐个全选父类也要标记选中。 第一反应就是树形结构，和递归调用。曾经在做WPF时记得有现成的组件，也学着写过对应的后台。这次我要自己写一个前端的组件了。 这只是我自己花了点时间写的一个vue组件，尚可优化及拓展。仅此与大家分享一下。 效果 实现 &amp;lt;template&amp;gt; &amp;lt;di...
vue构造树型结构数据
weixin_51010848的博客
12-13 840
vue构造树型结构数据
uViewUI-easycom摇树体积测试H5版
akulakk's memory stack
02-21 525
今天来个黑盒测试哈! 测试目的 查看 纯净uniapp工程​​​​​​​ 仅仅引用uViweUI核心函数 引入核心函数+指定几个组件 引入核心函数+自动引入组件 对应最终生成的文件的体积区别 测试结果分别截图如下 ...
vue实现tree-select组件(树选择器)
yang_da_da的博客
05-07 7750
基于iview的树选择器组件效果思路实现 组件效果 思路 主要用iview的Dropdown、Input和Tree组件实现，Dropdown作为外层组件，实现下拉收缩效果，Input实现数据回显，Tree加载数据选项。重点是Tree作为Dropdown的list插槽实现下拉选项的效果 实现 模板部分 trigger为custom，手动控制下拉框的显示，Input设为只读 <Dropdown ref="dropdownRef" style="width:100%" trigger="c
uniapp小程序实现无限层级的树形数据结构
qq_45750213的博客
08-16 3258
在uniapp中由于没有封装好的树形组件，只能自己纯手写实现。树形结构是无限层级的，所以想到了递归，使用组件循环技术实现。
史上最全，在vue中使用zTree实现树型结构（第二篇）
qq_39285178的博客
09-22 3238
对于不存在接口当中的数据，但是我页面又需要展示，也就是节点的操作（熟悉ztree的都知道，节点操作其实是最简单的，只要按照ztree的规则组装节点，什么复制节点，移除节点，添加节点巴拉巴拉都是小问题）；我的右键菜单中，大家可以看到有复制/移动功能，且我页面上是有三颗没有任何关联的树，当我使用复制/移动功能将某一个节点移动到其他树上的时候，需要将当前树的节点移除，而目标树新增一个节点（其实实现真的超级简单了）问题2:我觉得除了我们产品，应该没有哪个产品会提这么变态的需求吧，也不想讲了，有需要的可以提供思路。
Hbuilder X方式引入uView
weixin_46061982的博客
10-29 1420
配置uview
uView自定义图标和普通引入图标（iconfont-阿里巴巴图标库）
章小鱼的博客
10-10 5603
CustomIcon 扩展自定义图标库 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值