微信小程序中安装vant

以下是微信小程序中安装 Vant 的详细步骤:

1. 初始化项目

在微信小程序项目目录下,打开终端,执行以下命令进行项目初始化:

npm init -y

该命令会快速生成一个默认的package.json文件,-y参数表示直接使用默认配置,无需手动输入信息。

2. 安装 Vant 相关依赖

继续在项目目录下的终端中,执行以下命令安装 Vant Weapp:

npm i @vant/weapp -S --production

此命令会将 Vant Weapp 作为项目的生产依赖安装到node_modules目录中。

3. 修改app.json

打开项目根目录下的app.json文件,找到并删除其中的"style": "v2"字段。因为小程序的新版基础组件会强行加上许多样式,难以覆盖,不删除可能会导致部分组件样式混乱。

4. 修改project.config.json

由于微信开发者工具创建的项目中,miniprogramRoot默认为miniprogram,而package.json在外部,导致 npm 构建无法正常工作。需要在project.config.json文件中手动添加以下配置,以便开发者工具可以正确索引到 npm 依赖的位置:

"setting": {"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}]
}

注意:对于新版开发者工具,miniprogramNpmDistDir配置为"./"即可。

5. 构建 npm

打开微信开发者工具,点击“工具”->“构建 npm”,并勾选“使用 npm 模块”选项。构建成功后,即可在项目中使用 Vant 组件。

6. 使用组件

全局引入

app.json中添加需要使用的组件路径,例如:

"usingComponents": {"van-button": "@vant/weapp/button/index"
}

这样,在任意页面的wxml文件中都可以直接使用van-button组件。

局部引入

如果只想在某个页面使用某个组件,可以在该页面的json文件中进行引入,例如:

{"usingComponents": {"van-slider": "@vant/weapp/slider/index"}
}

然后在该页面的wxml文件中使用van-slider组件。

至此,Vant 组件库就成功安装并可以在微信小程序中使用了。

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

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

相关文章

今天做的力扣SQL

我本地markdown的东西直接复制出来了。 多说一嘴,今天早上六点醒了,然后被外面吵,心里也担心找实习就一直睡不着了。索性直接来实验室,这一上午感觉好快啊。幸运的是,自己也没有浪费时间,还行吧。SQL欠的账…

【开发常用命令】:docker常用命令

docker常用命令 基础命令 # 启动docker systemctl start docker # 关闭docker systemctl stop docker # 重启docker systemctl restart docker # 设置开机自启动 systemctl enable docker # 查看docker运行状态 systemctl status docker # 查看docker版本号信息 docker versi…

安装配置以太链钱包工具

安装go语言环境 1、官网下载go安装包并上传到指定机器 https://golang.google.cn/dl/ 2、解压缩至指定位置: tar -C /usr/local -xzf go1.21.0.linux-amd64.tar.gz 3、将 /usr/local/go/bin 目录添加至 PATH 环境变量: export PATH$PATH:/usr/local/g…

论文阅读:speculative decoding

Fast Inference from Transformers via Speculative Decoding 论文地址:https://arxiv.org/pdf/2211.17192 speculative sampling 为了从分布 p ( x ) p(x) p(x) 中采样,我们实际上是从分布 q ( x ) q(x) q(x) 中采样 x x x,如果 q ( …

java操作word里的表格

依赖&#xff1a; <dependency><groupId>com.techCoLtd</groupId><artifactId>aspose-words-16.4.0-jdk16</artifactId><classifier>jdk16</classifier> </dependency>/*** 删除表格及表格的行* throws Exception*/ private s…

单链表经典算法题之分割链表

给定一个头结点和一个值x&#xff0c;是链表中所有小于x的值都在x前面 typedef struct ListNode ListNode; struct ListNode* partition(struct ListNode* head, int x) { //思路一&#xff1a;在原链表上进行修改 //思路二&#xff1a;创建新链表&#xff0c;使用哨兵位&…

Modbus TCP转DeviceNet网关连接ABB变频器配置案例

某工厂需要将支持Modbus TCP协议的上位机控制系统&#xff08;如PLC或SCADA&#xff09;与支持DeviceNet协议的变频器&#xff08;如ABB ACS880、施耐德ATV320等&#xff09;进行通信。为实现协议转换&#xff0c;采用开疆智能Modbus TCP转DeviceNet网关KJ-DVCZ-MTCPS作为中间设…

【力扣 简单 C++】206. 反转链表

目录 题目 解法一&#xff1a;迭代 解法二&#xff1a;递归 题目 待添加 解法一&#xff1a;迭代 class Solution { private:ListNode* reverse(ListNode* head){ListNode* newHead {};while (head){ListNode* nextNode {head->next};head->next newHead;newHead …

计算机视觉之三维重建(深入浅出SfM与SLAM核心算法)—— 1. 摄像机几何

文章目录 1. 针孔相机1.1. 针孔成像1.2. 光圈对成像的影响 2. 透视投影相机2.1. 透镜成像2.2. 失焦2.3. 径向畸变2.4. 透视投影的性质 3. 世界坐标系到像素坐标系的变换4. 其它相机模型4.1. 弱透视投影摄像机4.2. 正交投影摄像机4.3. 各种摄像机模型的应用场合 课程视频链接&am…

第十三节:第七部分:Stream流的中间方法、Stream流的终结方法

Stream流常见的中间方法 Stream流常见的终结方法 代码 学生类&#xff08;代码一与代码二共涉及到的类&#xff09; package com.itheima.day28_Stream;import java.util.Objects;public class Student implements Comparable<Student> {private String name;private i…

深入理解 Go 中的字节序(Endianness)检测代码

深入理解 Go 中的字节序&#xff08;大小端&#xff09;检测代码 在计算机系统中&#xff0c;字节序&#xff08;Endianness&#xff09; 是指多字节数据类型&#xff08;如 int16、int32 等&#xff09;在内存中的存储顺序。Go 语言标准库提供了对大端&#xff08;Big-endian&…

JAVA:RabbitMQ 消息持久化机制的技术指南

🐇 1、简述 在使用 RabbitMQ 构建可靠消息系统时,消息丢失是必须避免的问题。为此,RabbitMQ 提供了消息持久化机制(Message Durability),可以保障在 Broker 异常宕机后数据不会丢失。 本篇博客将从原理出发,结合 Spring Boot 实战讲解如何正确实现 RabbitMQ 消息持久…

tabs页签嵌套表格,切换表格保存数据不变并回勾

需求&#xff1a;点击左边的tab页签&#xff0c;请求右侧表格数据&#xff1b;如果返回的接口数据存在taskuser字段并不为null&#xff0c;那么按照这个字段去回勾数据。如果存在数据&#xff0c;但与后面所勾选的数据项不同&#xff0c;按照后面勾选的为主。 <el-tabs tab-…

Java Kafka消费者

基础 Java Kafka消费者主要通过以下核心类实现&#xff1a; KafkaConsumer&#xff1a;消费者的核心类&#xff0c;用于创建消费者对象进行数据消费1ConsumerConfig&#xff1a;获取各种配置参数&#xff0c;如果不配置就使用默认值1ConsumerRecord&#xff1a;每条数据都要封…

Git操作问题及解决方案-记录5

Git操作问题及解决方案 问题一&#xff1a;本地更改与远程更新冲突 问题描述 当本地文件有未提交的更改&#xff0c;同时远程仓库也有更新时&#xff0c;执行git pull会导致冲突。 $ git pull origin main error: Your local changes to the following files would be overw…

一[3]、ubuntu18.04环境 利用 yolov8 训练开源列车数据集,并实现列车轨道检测

一、开源车载数据集地址 (7 封私信) 轨道交通数据集-OSDaR23: Open Sensor Data for Rail 2023 - 知乎 二、参考资料 https://zhuanlan.zhihu.com/p/692608487 YOLOv8训练自己的数据集-CSDN博客 https://download.csdn.net/blog/column/12710137/140991739

C语言数据结构笔记5:Keil 编译器优化行为_malloc指针内存分配问题

记录俩个keil5 STM32 的c语言编程中 &#xff0c;编译器优化行为 和 指针内存分配问题。 目录 关闭Keil 编译器优化行为&#xff1a; malloc指针内存分配问题 多层嵌套的结构体&#xff1a; 用指针取值&#xff1a; 发现问题&#xff1a; 解决问题&#xff1a; 示例代码 关闭Ke…

每日八股文6.12

每日八股-6.12 计算机网络1.当我们在浏览器中输入一个 URL 并按下回车后&#xff0c;到页面最终显示出来&#xff0c;这中间都发生了哪些关键步骤&#xff1f;2.请简述一下 JWT&#xff08;JSON Web Tokens&#xff09;的原理和校验机制3.DNS 是如何进行域名解析的&#xff1f;…

什么是云计算的边缘原生应用?

关于作者&#xff1a;John Bradshaw阿卡迈公司欧洲、中东和非洲地区云计算技术与战略总监 当谈及云计算时&#xff0c;人们往往会联想到那些坐落于国际大都会核心地带的大型数据中心集群&#xff0c;这些设施作为数字时代的重要枢纽&#xff0c;承载着海量数据处理任务。尽管这…

Linux常用命令速查与面试高频命令总结

&#x1f427; Linux常用命令速查与面试高频命令总结 本文旨在帮助初学者快速掌握 Linux 的常用命令&#xff0c;同时为即将参加技术面试的朋友们提供一份高频命令清单和实用技巧。 &#x1f530; 一、基础命令&#xff1a;熟练使用命令行从这里开始 这些是你在 Linux 中最常用…