uni-app配置Vant Weapp

news2025/2/12 17:42:35

uni-app配置vant-------浏览器运行环境下不兼容

  • 1.创建uni-app项目
  • 2.创建wxcomponents目录
  • 3. 安装vant需要的模块包
    • 3.1找一个空文件cmd 进入执行
      • 3.1.1通过 npm 安装
      • 3.1.2通过 npm 安装
    • 3.2.1获取dist文件
  • 4.将dist内容复制到wxcomponents目录下
  • 5.1 使用vant
    • 5.1使用button按钮
      • 5.1.1 在pages.json 中的globalStyle配置项中引入官网的配置![在这里插入图片描述](https://img-blog.csdnimg.cn/df3ef182ebe24e9bae8194ea899a8633.png)
      • 5.1.2 将引入官网的配置修改为我们自己下载好的文件路径
    • 5.2 在文件中使用button按钮
      • 5.2.1找到官网的button的配置
      • 5.2.2引入
  • 6.效果
  • 视频

1.创建uni-app项目

在这里插入图片描述

2.创建wxcomponents目录

在这里插入图片描述

3. 安装vant需要的模块包

3.1找一个空文件cmd 进入执行

vant官网

3.1.1通过 npm 安装

npm i @vant/weapp -S --production

3.1.2通过 npm 安装

yarn add @vant/weapp --production

3.2.1获取dist文件

在这里插入图片描述

4.将dist内容复制到wxcomponents目录下

在这里插入图片描述

5.1 使用vant

5.1使用button按钮

在这里插入图片描述

5.1.1 在pages.json 中的globalStyle配置项中引入官网的配置在这里插入图片描述

5.1.2 将引入官网的配置修改为我们自己下载好的文件路径

![!](https://img-blog.csdnimg.cn/3e58e0523bf0424984bdf78875a6f25b.png)

5.2 在文件中使用button按钮

5.2.1找到官网的button的配置

在这里插入图片描述

5.2.2引入

在这里插入图片描述

6.效果

在这里插入图片描述

视频

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

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

相关文章

Qt扫盲-QKeyEvent 键盘事件

QKeyEvent 键盘事件 一、概述二、事件传播三、常用属性1. key()2. modifiers()3. isAutoRepeat()4. text() 四、简单组合键代码 一、概述 QKeyEvent 是Qt 里面描述键盘事件的一个属性类,所有的事件本质上来说其实就是一个信息包,而这个包里面就是有这个…

探索Redis内部数据结构

Redis支持多种数据结构,每种数据结构都有其特定的用途。下面对Redis支持的主要数据结构进行详细阐述: 一、字符串(String) 字符串是Redis最基本的数据结构,可以存储一个字符串或者二进制数据,例如图片、序…

Echarts—词云库(echarts-wordcloud)配置详解和使用(可自定义形状)

词云库的详解 前言安装基本配置详解具体使用步骤(Vue为例)自定义展示形状 前言 我们经常会看到一些网站或者页面有一堆五颜六色的词汇的聚在一块,有大有小的散落着,看着挺好看的; 也许项目中也会涉及到显示一些关键词…

【Linux脚本篇】Linux循环语句-while

目录 🍁while的语法格式 🍁while循环案例 🍃案例一:输出10-1的降序 🍃案例二:输出10的升序和降序 🍃案例三:批量创建用户 🍁内置跳出循环 🍃案例一&#xff1…

火山引擎 DataLeap:一个易用、高效的数据目录,是如何搭建的?

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 企业如何找到数据、了解数据以及使用数据? 这离不开数据目录的能力。数据目录有着类似于“字典”的作用,能够帮助数据生产者和使用者快速定位…

ESXI 环境搭建和配置

ESXI 环境搭建和配置 ESXI简介 ESXi专为运行虚拟机、最大限度降低配置要求和简化部署而设计。只需几分钟时间,客户便可完成从安装到运行虚拟机的全过程,特别是在下载并安装预配置虚拟设备的时候。 在VMware Virtual Appliance Marketplace 上有800多款…

RabbitMQ 安装

目录 一、安装RabbitMQ1、Linux 安装⑴、官网rpm包安装①、下载rpm安装包官网下载erlangrabbitmq packagecloud下载erlangrabbitmq ②、安装 erlang③、安装rabbitmq ⑵、packagecloud快速安装⑶、添加用户账号及权限并登陆⑷、卸载erlang与rabbitmq卸载rabbitmq卸载erlang 2、…

积聚产业发展新动能|2023开放原子全球开源峰会OpenAtom OpenHarmony分论坛成功举办

6 月 12 日,以“OpenHarmony 共建开放,共享未来”为主题的 2023 开放原子全球开源峰会 OpenAtom OpenHarmony(以下简称“OpenHarmony”)分论坛在北京北人亦创国际会展中心第一报告厅圆满落幕。开放原子开源基金会理事长孙文龙、华…

【mongoDB数据库基本操作】

mongoDB 基本命令使用 mongoDB数据库基本操作1、连接/创建数据库3、查看数据库4、删除数据库 表的基本操作1、创建表2、删除表3、查询表4、更新表删除表中的记录 mongoDB数据库基本操作 连接mongoDb服务器 进入到mongoDb安装目录 cd /data/mongodb/bin 使用./mongo连接到本…

为什么你的领导,总是挑刺,要求你要有自己的思考?

为什么你的领导,总是挑刺,要求你要有自己的思考? 如何思考?其实有方法论和框架,照这做,也能提升自己的思考能力和维度。 尴尬的问题 在职场的给位是否遇到过这种情况。领导在开完一次沟通会,或…

公元前后的王莽与屋大维

公元元年前后,地球的两端同时产生了两个辉煌的大国,z国和罗马。 我国经历了漫长而又松散的分封制后,在秦帝国时期实现了大一统,在那个时代,因为分封制有效的管理半径最多也就是500公里左右,所以非常不适合…

牛客网1658 页的 Java 岗面试突击手册,GitHub已下载量已过百万

不得不说程序员除了做项目之外,提升自己技能最快的方式就是【看书!】和【刷题!】,这里说的刷题不是无脑刷,而是要明白面试官为什么会问这个问题,以及这个问题的意义在哪里! 今天带来的是全新升…

Beyond Compare 4 正版激活码 -变化是不可避免的,因此,请使用最好的工具对其进行管理。

Beyond Compare 是开发人员、系统管理员和其他人用来比较、合并和同步数据的软件应用程序。它可以在Windows,macOS和Linux上运行。 功能特点 比较文件夹、文件 一、随时随地访问数据 Beyond Compare 是敏捷的。 我们的虚拟文件系统以透明的方式将您连接到您的数据…

Stable Diffusion实操示例

一、负向提示词 解决问题:生成的图片存在瑕疵,比如多只眼睛、多只手指等情况。通过embeddings可以将避免一些常用的不好结果。 方法:从https://civitai.com/?utm_sourcenettsz.com 中下载负向提示词的embeddings模型, EasyNeg…

SOLIDWORKS 2023修复遗漏配合参考及装配体磁力配合

1、修复遗漏的配合参考 ① 为面、边线、平面、轴和点的参考修复遗漏的配合参考 ② 位于与遗漏的参考相同的位置和方向的零部件上选择参考,可修复零 部件遗漏的参考 ③ 包含多个遗漏的配合参考的模型,右键单击配合 文件夹,然后单击自动修复…

AI Expo 2023 | 图技术激活数据资产主题论坛线下报名限时开放!

洞察关联数据 创造无限可能 图技术激活数据资产主题论坛 将于2023年6月25日在苏州召开。 大会背景 本次图技术激活数据资产论坛,由苏州市大数据服务中心协会主办、浙江创邻科技有限公司承办,苏州市计算机学会、苏州市大数据和人工智能产业联盟协办&…

(五) ElasticSearch 数据类型和文档CRUD操作

1.ES数据类型 官方文档地址:https://www.elastic.co/guide/en/elasticsearch/reference/current/mapping-types.html#_complex_datatypes 核心数据类型(Core Data Types): 核心数据类型是 Elasticsearch 最基本和常用的数据类型…

DataX 3.0 在Windows下基于MySQL做数据迁移示例

在 Windows 安装 Datax: Datax 官网:https://github.com/alibaba/DataX 环境要求: 1:JDK(1.8以上,推荐1.8,并配置好环境变量) 2:Python(网上推荐Python2.…

Java线程的同步机制(synchronized关键字)

线程的同步机制(synchronized ) 1.背景 例子:创建个窗口卖票,总票数为100张.使用实现Runnable接口的方式 * 1.问题:卖票过程中,出现了重票、错票 -->出现了线程的安全问题2.问题出现的原因:当某个线程操作车票的过…

罗马不是一天建成的,那为什么建了那么多罗马?

这一个罗马,那一个罗马,东一个罗马,西一个罗马,世界历史的大半部分都在跟罗马打交道。更要命的是四大文明古国还没有古代罗马。 存在感这么强,还不是四大文明古国,名字还难记,公元前居然就有共…