uView 在 uni-app 中的使用

文章目录

  • 一、uView是什么?
    • 1.uView 安装
    • 2.uView 在 uni-app 中的使用


一、uView是什么?

提示:正文内容:

uView 官网: https://www.uviewui.com uView 是 uni-app 生态专用的 UI 框架

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

1.uView 安装

uView 官网提供了两种安装方式: Hbuilder X 方式、NPM 方式

Hbuilder X 方式: 使用 uni-app 搭建的项目,NPM 方式: 使用 vue cli 搭建的项目,根据项目框架选择相应的方式安装即可

uView 依赖 SCSS,必须要安装此插件,否则无法正常运行

2.uView 在 uni-app 中的使用

使用 HBuilderX 导入插件
配置步骤

  1. 引入 uView 主 JS 库

在项目根目录中的 main.js,引入并使用 uView 的 JS 库,这两行要放到import Vue from 'vue'
代码如下(示例):

data = pd.read_csv('https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
  1. 引入 uView 的全局 SCSS 主题文件
    在项目根目录中的 uni.scss,引入全局SCSS主题文件
/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';
  1. 引入 uView 基础样式
    在项目根目录中的 App.vue,注意,要在首行位置引入,并且给 style 标签添加 lang="scss" 属性
<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "@/uni_modules/uview-ui/index.scss";
</style>

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

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

相关文章

vue中预览静态pdf文件

方法 // pdf预览 viewFileCompare() { const pdfUrl "/static/wjbd.pdf"; window.open(pdfUrl); }, // 下载 downloadFile(){ var a document.createElement("a"); a.href "/static/wjbd.pdf"; a.…

学生管理系统-03项目案例(3)

一、用户列表 1、编写api接口 //导入封装后的axios import {instance} from /util/request export default{getUsers:params>instance.get(/users/getUsers,{params}) } 2、表格渲染 <template><el-card><!-- 当el-table元素中注入data对象数组后&#x…

React之组件间通信

React之组件间通信 组件通信&#xff1a; 简单讲就是组件之间的传值&#xff0c;包括state、函数等 1、父子组件通信 父组件给子组件传值 核心&#xff1a;1、自定义属性&#xff1b;2、props 父组件中: 自定义属性传值 import Header from /components/Headerconst Home ()…

关于Anaconda环境配置的一些问题

文章目录 一、关于package文件安装位置二、关于尝试下载Python包时出现的CondaSSLError三、配置环境的整个流程 一、关于package文件安装位置 package 文件安装在envs目录底下的Lib中&#xff0c;可以参考一下。 在对应的Python脚本文件中&#xff0c;选择Parameters&#xff0…

【Spring】Spring 总览

一、简单介绍一下 Spring Spring是一个全面的、企业应用开发的一站式解决方案&#xff0c;贯穿表现层、业务层、持久层&#xff0c;可以轻松和其他框架整合&#xff0c;具有轻量级、控制反转、面向切面、容器等特征。 轻量级 &#xff1a; 空间开销和时间开销都很轻量 控制反…

蓝桥杯单片机第十二届国赛 真题+代码

iic.c /* # I2C代码片段说明1. 本文件夹中提供的驱动代码供参赛选手完成程序设计参考。2. 参赛选手可以自行编写相关代码或以该代码为基础&#xff0c;根据所选单片机类型、运行速度和试题中对单片机时钟频率的要求&#xff0c;进行代码调试和修改。 */ #include <STC1…

antd vue tree的增删改和拖拽

最近项目中遇到一个tree型数据的的操作的功能&#xff0c;代码简单如下&#xff1a; <a-treeshowLineshowIcon:draggable"draggable":expandedKeys"expandedKeys":treeData"treeData"drop"onDrag"expand"onExpand">&l…

java springBoot 整合日志

1.在Spring Boot项目的resources目录下创建一个新的logback.xml文件。 2.logback.xml中&#xff0c;配置 代码 <?xml version"1.0" encoding"UTF-8"?> <!-- 日志级别从低到高分为TRACE < DEBUG < INFO < WARN < ERROR < FATAL…

了解Unity编辑器之组件篇Physics 2D(十二)

一、Area Effector 2D区域施加力&#xff09;&#xff1a;用于控制区域施加力的行为 Use Collider Mask&#xff08;使用碰撞器遮罩&#xff09;&#xff1a;启用后&#xff0c;区域施加力仅会作用于特定的碰撞器。可以使用Collider Mask属性选择要作用的碰撞器。 Collider Ma…

vmware中windows操作系统虚拟机安装

1.win10中安装 1.1 虚拟机向导 文件-新建虚拟机 典型-下一步 稍后安装操作系统-下一步 window10 64x -下一步 修改虚拟机名称及位置-下一步 默认60g,至少大于40g-将虚拟磁盘拆分成多个文件夹-下一步 点击完成 1.2 编辑虚拟机设置 移除打印机 设置虚拟机&#xff0c;加入iso映…

【隐式动态求解】使用非线性纽马克方法的隐式动态求解研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

关联规则独热编码

文章目录 关联规则引言相关名词 独热编码引言代码第一种第二种 关联规则 引言 在一家超市里&#xff0c;有一个有趣的现象&#xff1a;尿布和啤酒竟然摆在一起出售。但是这个奇怪的举措却使尿布和啤酒的销量双双增加了。 一个意外的发现是&#xff1a;”跟尿布一起购买最多的…

数据库选型

影响数据库选择的因素 数据量&#xff1a;是否海量数据&#xff0c;单表数据量太大会考验数据库的性能数据结构&#xff1a;结构化 (每条记录的结构都一样) 还是非结构化的 (不同记录的结构可以不一样)是否宽表&#xff1a;一条记录是 10 个域&#xff0c;还是成百上千个域数据…

小程序 获取用户头像、昵称、手机号的组件封装(最新版)

在父组件引入该组件 <!-- 授权信息 --><auth-mes showModal"{{showModal}}" idautnMes bind:onConfirm"onConfirm"></auth-mes> 子组件详细代码为: authMes.wxml <!-- components/authMes/authMes.wxml --> <van-popup show…

CompletableFuture生产中使用问题

CompletableFuture生产中使用问题 1 背景2 测试3 原因4. 总结 1 背景 接到一个任务,需要优化下单接口,查看完业务逻辑后发现有一些可以并行或异步查询的地方,于是采用CompletableFuture来做异步优化,提高接口响应速度,伪代码如下 //查询用户信息CompletableFuture<JSONObj…

安全测试国家标准解读——数据库管理和文件管理

下面的系列文章主要围绕《GB/T 38674—2020 信息安全技术 应用软件安全编程指南》进行讲解&#xff0c;该标准是2020年4月28日&#xff0c;由国家市场监督管理总局、国家标准化管理委员会发布&#xff0c;2020年11月01日开始实施。我们对该标准中一些常见的漏洞进行了梳理&…

Commands Of Hadoop

序言 持续整理下常用的命令cuiyaonan2000163.com Command 文件拷贝 当从多个源拷贝时&#xff0c;如果两个源冲突&#xff0c;distcp会停止拷贝并提示出错信息&#xff0c;. 如果在目的位置发生冲突&#xff0c;会根据选项设置解决。 默认情况会跳过已经存在的目标文件&am…

Ansible

目录 ansible 环境安装部署 管理端安装 ansible ansible 目录结构 配置主机清单 配置密钥对验证 ansible 命令行模块 1&#xff0e;command 模块 2&#xff0e;shell 模块 3&#xff0e;cron 模块 4&#xff0e;user 模块 5&#xff0e;group 模块 6&#xff0e;co…

环境搭建-Ubuntu20.04.6系统TensorFlow BenchMark的GPU测试

1. 下载Ubuntu20.04.6镜像 登录阿里云官方镜像站&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 2. 测试环境 Server OS&#xff1a;Ubuntu 20.04.6 LTS Kernel: Linux 5.4.0-155-generic x86-64 Docker Version&#xff1a;24.0.5, build ced0996 docker-com…

Django框架:使用channels实现websocket,配置和项目实际使用

一、基本配置 依赖包&#xff1a; Django3.2 django-cors-headers3.5.0 redis4.6.0 #操作redis数据库的 channels3.0.0 #websocket channels-redis4.1.0 #通道层需要&#xff0c;依赖redis包项目目录结构&#xff1a; study_websocket --study_websocket --__init__.py --s…