uview组件库的安装

news2025/2/23 4:50:38

更多的请查看官方文档uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-app UI 框架 (uviewui.com)

// 如果您的根目录没有package.json文件的话,请先执行如下命令:
// npm init -y

安装  npm install uview-ui@2.0.36

// 更新
// npm update uview-ui

// 通过`console.log`打印的形式
console.log(uni.$u.config.v);

// 可以查阅uView的配置文件得知当前版本号,具体位置为:
/uview-ui/libs/config/config.js

// main.js,注意要在use方法之后执行

将这一段放在 import App from './App'的下边Vue.config.productionTip = false的上边
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'

放在main.js的最下边
// 调用setConfig方法,方法内部会进行对象属性深度合并,可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
    // 修改$u.config对象的属性
    config: {
        // 修改默认单位为rpx,相当于执行 uni.$u.config.unit = 'rpx'
        unit: 'rpx'
    },
    // 修改$u.props对象的属性
    props: {
        // 修改radio组件的size参数的默认值,相当于执行 uni.$u.props.radio.size = 30
        radio: {
            size: 15
        }
        // 其他组件属性配置
        // ......
    }
})

// 安装sass
npm i sass -D

// 如果您的项目是HX创建的,根目录又没有package.json文件的话,请先执行如下命令:
// npm init -y

// 安装
npm install uview-ui@2.0.36

在项目src目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

 在引入uView的全局SCSS主题文件

在项目src目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';

 引入uView基础样式

注意!

App.vue首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>

 配置easycom组件模式

此配置需要在项目src目录的pages.json中进行。

温馨提示

  1. uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
  2. 请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。
// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

一个流程下来引入组件就可以使用了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1028036.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

生产数据追溯产线管理看板助力企业实现产品质量追踪

在现代制造业中&#xff0c;企业对于产品质量的追踪和管理变得越来越重要。产品质量的好坏直接关系到企业的声誉和客户满意度。然而&#xff0c;传统的生产管理方式往往无法提供足够的数据和信息来进行全面的质量追踪。生产看板管理系统的出现为企业解决了这一难题。通过实时的…

大模型LLM深入浅出、主打通俗易懂

AI(人工智能)是通过机器来模拟人类认识能力的一种科技能力。AI最核心的能力就是根据给定的输入做出判断或预测。对数据进行分析&#xff0c;从而总结得到研究对象的内在规律。一般通过使用适当的统计、机器学习、深度学习等方法&#xff0c;对收集的大量数据进行计算、分析、汇…

【FAQ】安防监控系统/视频云存储EasyCVR平台安全检查Proxy出现sql injection的漏洞,该如何修改?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。 最近有用户反馈&…

安卓系列机型 框架LSP 安装步骤 支持多机型 LSP框架通用安装步骤【二】

​​​​​​安卓玩机教程---全机型安卓4----安卓12 框架xp edx lsp安装方法【一】 低版本可以参考上个博文了解相关安装方法。 LSP框架优点 简单来说装lsp框架的优点在于可以安装各种模块。包括 但不限于系统优化 加速 游戏开挂等等的模块。大致相当于电脑的扩展油猴 Lspos…

《思维与智慧》简介及投稿邮箱

《思维与智慧》自1982年创刊&#xff0c;经国家新闻出版署批准&#xff0c;由河北省教育厅主管&#xff0c;河北行知文化传媒有限责任公司主办的益智励 志类大众文化期刊。 《思维与智慧》办刊宗旨是&#xff1a;“开发思维&#xff0c;启迪智慧&#xff0c;滋润心灵”&#x…

C# OpenCvSharp Yolov8 Detect 目标检测

效果 项目 代码 using OpenCvSharp; using OpenCvSharp.Dnn; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace Open…

全球南方《乡村振兴战略下传统村落文化旅游设计》八一新枝——2023学生开学季许少辉瑞博士生辉少许

全球南方《乡村振兴战略下传统村落文化旅游设计》八一新枝——2023学生开学季许少辉瑞博士生辉少许

全能电子地图下载器3.0-下载离线地图瓦片

前言 vue项目要部署到局域网内&#xff0c;不使用在线地图&#xff0c;而是离线地图&#xff0c;寻求了很多的解决方案&#xff0c;最终决定使用离线地图瓦片leaflet.js实现效果&#xff01; 正文 首先需要下载正版的软件&#xff0c;目前我实用的是V3.0版本的&#xff0c;可能…

gateway之断言的使用详解

文章目录 gateway产生的背景&#xff0c;为什么要是用gateway什么是网关gateway 带来的好处功能特征gateway在项目中使用的依赖 什么是断言断言分类内置自定义示例 断言和过滤器的不同 gateway产生的背景&#xff0c;为什么要是用gateway 一个系统会被拆分为多个微服务&#x…

Android OpenGL 做了一个修图(P 图)功能,对标 PS

P 图功能与 OpenGL 玩过 P 图软件的朋友一定对这个功能有所了解,P 图我们可以简单地看做把一个区域的像素按照某一方向进行移动,产生一定形变效果,基于这个原理,我们可以手动实现瘦脸、长腿、瘦腰、大眼、丰胸等等一系列效果,从而达到美颜、美型的目的。 我们将一个区域的…

四轴无人机-飞行控制原理(PID)

控制目标&#xff1a; 1、稳定/平衡 【最核心】&#xff1a;四旋翼微型飞行器的控制就是以地理坐标系为参考&#xff0c;做三维飞行姿态控制。控制目标是使其在 无动作指令时保持稳定悬停状态&#xff0c;有动作指令 时有效完成指定动作。 2、准确 3、快速 4、鲁棒 控制方法…

【李沐深度学习笔记】线性代数实现

课程地址和说明 线性代数实现p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 这节就算之前内容的复习&#xff0c;后面以截图形式呈现 标量由只有一个元素的张量表示 import torch x torch.tensor([3.0]) y …

时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解

时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解 目录 时序分解 | Matlab实现CEEMD互补集合经验模态分解时间序列信号分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现CEEMD互补集合经验模态分解时间序列信号分解 1.分解效果图 &#xff0…

hive3.X的HiveServer2 内存泄漏问题定位与优化方案(bug)

参考文档&#xff1a; https://juejin.cn/post/7141331245627080735?searchId20230920140418F85636A0735C03971F71 官网社区&#xff1a; https://issues.apache.org/jira/browse/HIVE-22275 In the case that multiple statements are run by a single Session before bein…

金蝶云星空与旺店通·旗舰奇门对接集成收料通知单查询连通新增采购订单(金蝶收料通知单-旺店通采购订单开单)

金蝶云星空与旺店通旗舰奇门对接集成收料通知单查询连通新增采购订单(金蝶收料通知单-旺店通采购订单开单) 数据源平台:金蝶云星空 金蝶K/3Cloud结合当今先进管理理论和数十万家国内客户最佳应用实践&#xff0c;面向事业部制、多地点、多工厂等运营协同与管控型企业及集团公司…

Linux学习-HIS系统部署(2)

GitLab服务器搭建 使用rpm包本地部署GitLab服务器 # 确认GitLab主机硬件配置&#xff0c;注GitLab服务器至少要有4G内存&#xff0c;关闭SWAP分区 [rootgitlab ~]# free -mtotal used free shared buff/cache available Mem: 4021 1…

“高级前端开发技术探索路由的使用及Node安装使用“

目录 引言1. Vue路由的使用2. VueNode.js的安装使用总结 引言 在当今互联网时代&#xff0c;前端开发技术日新月异&#xff0c;不断涌现出各种新的框架和工具。作为一名前端开发者&#xff0c;我们需要不断学习和探索新的技术&#xff0c;以提升自己的开发能力。本文将深入探讨…

Windows AD域使用Linux Samba

Windows AD域使用Linux Samba 1. 初始化配置 1.1 初始化配置 配置服务器名 hostnamectl set-hostname samba.sh.pana.cnhosts文件配置,确保正常解析到本机和域控 [rootcentos7 ~]# cat /etc/hosts 127.0.0.1 localhost localhost.localdomain localhost4 localhost4.loc…

微信小程序商城怎么弄

微信小程序商城怎么弄&#xff1f;这是一个常见的问题&#xff0c;对于那些想要在微信上创建一个自己的商城的人来说。下面为您介绍一些基本的步骤和注意事项&#xff0c;帮助您轻松地创建一个微信小程序商城。 首先&#xff0c;要创建一个微信小程序商城&#xff0c;您需要注册…

java面向对象(七)

文章目录 一、单例设计模式是什么&#xff1f;1.概念2.如何实现1.饿汉式2.懒汉式 3.区分饿汉式和懒汉式 二、main()方法的使用1.使用说明 三、类的成员之四&#xff1a;代码块&#xff08;或初始化块&#xff09;1.概念2.静态代码块3.非静态代码块 四、final关键字五、多态性的…