微信小程序使用Vant组件库流程

目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。这样开发原生微信小程序的会方便很多。

官方网址:Vant Weapp - 轻量、可靠的小程序 UI 组件库

步骤一 通过 npm 安装

npm i @vant/weapp -S --production

步骤二 修改 app.json

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

步骤三 修改 project.config.json

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

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

步骤四 构建 npm 包

打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

fe41514c780145bd9dcc53357c11837a.png

可能存在的问题:

d74d8f824045499fa083a2dafef2fe89.png

message:发生错误
Error: D:\ADagy\default\miniprogram\ 未找到
appid: wx24433b5f2d5f3e1a
openid: o6zAJsxdZsY0kyRUdjpKnfkgaf_Q
ideVersion: 1.06.2306020
osType: win32-x64
time: 2024-03-26 18:03:39

解决:

"miniprogramNpmDistDir": "./",改为./

使用

引入组件

按需引入

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

 

 

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

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

相关文章

Matplotlib库的初步理解与使用

matplotlib库的设计哲学: Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python. Matplotlib makes easy things easy and hard things possible. matplotlib是一个用来创建静态,动画&#…

蓝牙信标覆盖范围

蓝牙信标覆盖范围是一个重要的考虑因素,对于蓝牙技术的应用和部署至关重要。了解蓝牙信标的覆盖范围可以帮助我们更好地规划蓝牙设备的布局和位置,从而实现最佳的信号覆盖和传输效果。 首先,我们需要明确蓝牙信标的覆盖范围受到多种因素的影…

10 天 996 写出的语言 - JavaScript

本文转自 公众号 ByteByteGo,如有侵权,请联系,立即删除 10 天 996 写出的语言 - JavaScript 在 JavaScript 之前,网页主要是静态的,任何交互性都必须在服务器端处理,导致用户体验笨拙和缓慢。JavaScript 的…

C语言与sqlite3入门

c语言与sqlite3入门 1 sqlite3数据类型2 sqlite3指令3 sqlite3的sql语法3.1 创建表create3.2 删除表drop3.3 插入数据insert into3.4 查询select from3.5 where子句3.6 修改数据update3.7 删除数据delete3.8 排序Order By3.9 分组GROUP BY3.10 约束 4 c语言执行sqlite34.1 下载…

Web UI 自动化测试方案(超级干货)看完不会你找我

项目讨论 一、项目中符合自动化测试的部分有哪些?(目标和范围 scope, 准入准出标准) 1、稳定的需求点、变动较少的页面 2、每日构建后的测试验证 daily build 3、比较频繁的回归测试 4、需要在多平台上运行的相同测试案例、组合遍历型的测试、大量的重…

what is apache?

Apache 通常指 Apache Software Foundation (ASF) 或 Apache HTTP Server,两者都是计算机软件领域的重要实体。 Apache 软件基金会 (ASF):Apache 软件基金会是一个开发开源软件项目的非营利组织。它为涵盖软件开发各个方面的广泛项目提供支持&#xff0c…

3dmax展厅异形模型怎么做---模大狮模型网

在3ds Max中创建展厅异形模型需要一定的建模技巧和创造力。以下是一般的步骤: 准备设计方案: 首先,需要明确展厅的设计方案和概念,包括展厅的整体结构、空间布局和异形特点等。 创建基本结构: 在3ds Max中&#xff…

MySQL数据库的备份-恢复-日志

一、备份: 1.数据备份的重要性: 备份的主要目的是灾难恢复。 在生产环境中,数据的安全性至关重要。 任何数据的丢失都可能产生严重的后果。 2.造成数据丢失的原因: 程序错误人为操作错误运算错误磁盘故障灾难(如…

30岁失业的我,选择职场转型,进入AIGC工程师领域,重新开始

去年,刚满30岁的我又一次被公司辞退了,由于学历不高,简历也不出彩,尽管半个月来投了一份又一份的简历,但仍然是石沉大海,我终于不得不开始思考一个以前被我一直刻意压制的想法——职场转型。 尽管知道这条…

大模型知识点汇总——分布式训练

PS:本篇只在宏观上介绍相关概念和技术,不做数学推导和过于细节介绍,旨在快速有一个宏观认知,不拘泥在细节上,导致很混乱。 涉及技术名词 分布式框架等涉及的技术名词很多,很容易让人眼花缭乱,…

echarts 柱形图如何让其中一个柱子的颜色跟其他柱子不同

如何让其中一个柱子的颜色跟其他柱子不同 series: [{data: [120,// 使用对象的形式, value代表当前值, itemStyle设置样式{value: 200,itemStyle: {color: #a90000}},150,80,70,110,130],type: bar}]设置单个柱子颜色: 柱形图单个柱子颜色: https://e…

Vue3+Element Plus+TS开发企业管理后台(二)

使用vite初始化项目 确保你的开发环境中已经安装了Node.js,而且有npm,yarn等包管理工具,然后可以按照vite官方提供的方式初始化项目: yarn create vite跟随提示选择即可: 或者可以直接克隆下面的仓库 https://gith…

flask_restful规范返回值之参数设置

设置重命名属性和默认值 使用 attribute 配置这种映射 , 比如: fields.String(attributeusername) 使用 default 指定默认值,比如: fields.String(defaultsxt) from flask import Flask,render_template from flask_restful import A…

selenium自动化测试-unittest框架

unittest框架的优点 (1)能够组织多个用例去执行 (2)提供丰富的断言方法 (3)能够生成测试报告 unittest框架的核心要素 1. TestCase测试用例 TestCase(测试用例),最小的测试单元,创建的测试类需要继承该基类 步骤: (1&#x…

风丘EV能量流测试解决方案 提高电动汽车续航能力

电动汽车(EV)近些年发展迅猛,已被汽车业内普遍认为是未来汽车发展的新方向,但现如今电动汽车仍然存在一些短板,导致其还无法替代传统燃油车。对此,首先想到的肯定就是电动车的续航问题。其实解决电动车续航…

VBA技术资料MF133:隐藏编辑栏及计算字符串

我给VBA的定义:VBA是个人小型自动化处理的有效工具。利用好了,可以大大提高自己的工作效率,而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套,分为初级、中级、高级三大部分,教程是对VBA的系统讲解&#…

centos7 使用docker安装了mongo 怎么设置远程链接,必须使用密码才能连接

docker run -d –name mongodb_container -e MONGO_INITDB_ROOT_USERNAMEroot -e MONGO_INITDB_ROOT_PASSWORDroot -e MONGO_INITDB_DATABASEdataserver -p 27017:27017 \ 无法在mongo容器里编辑文件 如果你无法直接编辑 MongoDB 容器内的配置文件,你可以尝试…

基于java+springboot+vue实现的大学生二手物品交易商城(文末源码+Lw+ppt)23-329

摘 要 二十一世纪我们的社会进入了信息时代,信息管理系统的建立,大大提高了人们信息化水平。传统的管理方式对时间、地点的限制太多,而在线管理系统刚好能满足这些需求,在线管理系统突破了传统管理方式的局限性。于是本文针对这…

Java:包装类简单认识泛型

一、包装类 包装类指的是基本数据类型(如int、double等)对应的类类型,我们可以通过包装类直接调用里面的方法! 基本数据类型 包装类 byte Byte short …

09 网络ARP请求,响应,ICMP协议

arp协议_arp请求_arp回应 ICMP包构造ping搜狐服务器参考 #include <stdio.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> #include <linux/if_packet.h> #include <linux/if_ether.h> #include <string.h> #includ…