uniapp 中uview-ui的使用教程_uniapp使用uview-ui-程序员宅基地

技术标签: Uni-app  Wechart  小程序  uni-app  

1.首先创建uniapp项目
在这里插入图片描述
2.在头部工具栏 工具→插件安装 中安装 scss/sass编译
在这里插入图片描述
3.去uni-app插件市场下载插件ZIP,解压后放入项目根目录
下载地址:https://ext.dcloud.net.cn/plugin?id=6682
在这里插入图片描述
4.引入uView主JS库
在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。

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

在这里插入图片描述

5.在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

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

在这里插入图片描述

6.引入uView基础样式
注意:在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

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

在这里插入图片描述

7.配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。
uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

// pages.json
{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

在这里插入图片描述

这样就完成了
uview的组件使用方法请看官网示例
https://www.uviewui.com/components/install.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hu104160112/article/details/120076812

智能推荐

http 500内部服务器错误-程序员宅基地

文章浏览阅读2.7k次。http 500内部服务器错误--------------------------------------------------------------------------------一.错误表现 iis5的http 500内部服务器错误是我们经常碰到的错误之一,它的主要错误表现就是asp程序不能浏览但htm静态网页不受影响。另外当错误发生时,系统事件日志和安全事件日志都会有..._http500

Oracle Temp临时表空间及其故障处理-程序员宅基地

文章浏览阅读575次。Oracle Temp临时表空间及其故障处理 Oracle 11g中Temp临时表空间、文件的新特性 临时表空间是Oracle体系结构中比较特殊的结构。通常情境下,数据库..._ora临时表空间报错,无法打开文件

BurpSuite抓取App包,详细教程_burp抓取手机app数据包-程序员宅基地

文章浏览阅读5.4k次,点赞5次,收藏27次。进入burpsuite工具,配置代理,端口与夜神模拟器保持一致,地址选择指定地址,输入本机IPV4地址;打开burp suite工具进入Proxy,如图,点击open browser。代理选择手动,代理服务器主机名输入本机的IPV4地址(使用。查询),代理服务器端口随便输入,只要不冲突即可;输入证书名,确定,安装成功!_burp抓取手机app数据包

JAVA学习:JAVA中一些常用的方法和使用技巧_java的妙用方法-程序员宅基地

文章浏览阅读401次。目录一、修改数据结构中的Compare二、向二维数组中快速填充同一个元素:三、StringBuilder的常用方法:四、Math的常用方法:参考链接菜鸟教程五、字符串六、容器类一、修改数据结构中的CompareComparable和Comparator的区别:[https://blog.csdn.net/qq_37768971/article/detai..._java的妙用方法

【特征工程】(一)数据集中缺失值的处理_特征工程 空值处理-程序员宅基地

文章浏览阅读9k次,点赞7次,收藏53次。目录引言一、可选处理方法二、Python中Pandas库处理缺失值1.查看数据缺失值得分布情况2.删除包含缺失值的数据 2.1. 删除包含缺失值的行或列 2.2. 根据条件删除包含缺失值的数据三、Python中其他库处理缺失值四、缺失值处理案例(一)----疝气病数据集预处理1.处理缺失值,以便使用分类算法引言 数据中的缺失值是..._特征工程 空值处理

Log4j.properties配置详解-程序员宅基地

文章浏览阅读2.8w次,点赞16次,收藏92次。1 入门示例1.1 新建一个Java工程,导入包log4j-1.2.17.jar,整个工程最终目录如下1.2 src同级创建并设置log4j.properties### 设置###log4j.rootLogger = debug,stdout,D,E### 输出信息到控制抬 ###log4j.appender.stdout = org.apache.log4j.Conso..._log4j.properties

随便推点

python能制作游戏吗_python制作galgame引擎(一)-程序员宅基地

文章浏览阅读654次。写这个项目的直接原因是最近推galgame推得有点过头,gal推过头的直接结果就是YY能力上涨,抱着“我也想写好玩的剧本”的轻率念头,也就开始了这个项目。不过从直接感觉来说,galgame毕竟也是开发成本(个人)以及技术要求最低的游戏类别之一,这当然也算是原因。于是到了现在,一个半成品式的框架就搭好了。实话实说,gal引擎开发,技术难度不算大。但是,需要考虑的方面却相当多,许多看起来很简单的东西开..._galgame的代码很难写吗

高效开发iOS系列 -- 为Xcode添加删除行、复制行快捷键_ios 修改复制粘贴快捷键-程序员宅基地

文章浏览阅读1.4w次,点赞9次,收藏11次。在使用eclipse过程中,特喜欢删除一行和复制一行的的快捷键。而恰巧Xcode不支持这两个快捷键,再一次的恰巧让笔者发现了一个小窍门来增加这两个快捷键,以下是步骤: 修改权限 修改Xcode里快捷键的配置文件(plist)权限,打开终端输入如下两条命令:sudo chmod 666 /Applications/Xcode.app/Contents/Frameworks/IDEKit.fram_ios 修改复制粘贴快捷键

GCC各种调试工具使用简介-程序员宅基地

文章浏览阅读1.7k次。http://blog.sina.com.cn/s/blog_6b94d5680101p7fm.htmlGCC:GNU开发的程序编译器 GNU:“GNU‘s Not Unix”,最初是为了实现一个类似unix的自由操作系统,感觉现在已经通常泛指遵循GPL自由软件精神的组织。GPL:GNU通用公共许可证(GNU General Public License),简单的说就是遵循GPL的

python+selenium简单操作高德地图路线规划_selenium地图-程序员宅基地

文章浏览阅读716次,点赞2次,收藏2次。1、导入selenium库,第三方库要下载pip install selenium_selenium地图

Android 非常简单的实现 Fragment状态栏一体化布局,状态栏字体的颜色改变,_android immersionbar设置黑色字体-程序员宅基地

文章浏览阅读3.4k次。做一个点上的项目的时候遇到一个问题,就是商城首页的布局要覆盖状态栏,可以这么理解,上图:就像京东的首页一样的效果我的项目是 MainActivity + 四个Fragment,第一步:需要把状态栏的背景色变为透明色,这个网上很多博客都写过,我就不写了第二部:我先说一下这个属性fitSystemWindows,因为不管是做状态栏变色和一体化布局,都相关这个属性_android immersionbar设置黑色字体

oracle 传递table,ORACLE 自定义TABLE类型,C#怎么传递值-程序员宅基地

文章浏览阅读137次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼CREATE OR REPLACE TYPE IM_CHECKLIST_PARAM IS OBJECT(ID RAW(16),SCORE INTEGER,DESCRIPTION NVARCHAR2(300),FOLLOWPLAN NVARCHAR2(300));CREATE OR REPLACE TYPE IM_CHECKLIST_T..._oracle自定义数据类型的数据怎么传到procedure c#