当前位置: 首页 > news >正文

原生微信小程序按需引入vant

vant 

Vant Weapp - 轻量、可靠的小程序 UI 组件库

1.npm安装

 找到项目根目录 安装

# 通过 npm 安装
npm i @vant/weapp -S --production# 通过 yarn 安装
yarn add @vant/weapp --production# 安装 0.x 版本
npm i vant-weapp -S --production

2 .修改 app.json

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

3.修改 project.config.json

找到setting 下面添加以下代码就行

{..."setting": {...  //此处代表之前此处有很多代码"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}]}
}

      由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为'./'即可

4.构建 npm 包

点击工具  构建npm  

 5.如果报错以下

Error: D:\MyProject\wx小程序\wxProject\miniprogram\ 未找到 [1.06.2301160][win32-x64]

  "miniprogramNpmDistDir": "./miniprogram/"  需要改为   "miniprogramNpmDistDir": "./"

"setting": {...  //此处代表之前此处有很多代码"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./"}]}

6.app.json中加入以下代码

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

 页面测试

 <van-button type="primary">按钮button>

 上面是npm安装的使用  其他方式请移步官网

相关文章:

原生微信小程序按需引入vant

vant Vant Weapp - 轻量、可靠的小程序 UI 组件库 1.npm安装 找到项目根目录 安装 # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production 2 .修改 app.json 将 app.jso…...

高性能IO模型:为什么单线程Redis能那么快?

我们通常说Redis是单线程&#xff0c;主要是指Redis的网络IO和键值对读写是由一个线程来完成的。这也是Redis对外提供键值存储服务的主要流程。 但redis的其他功能&#xff0c;比如持久化、异步删除、集群数据同步等&#xff0c;其实是由额外的线程执行的。 Redis为什么用单线…...

【数据集】中国各类水文专业常用数据集合集

1 水文气象数据 1.1 中国站点尺度天然径流量估算数据集&#xff08;1961&#xff5e;2018年&#xff09; 论文&#xff1a; J2022-High-quality reconstruction of China’s natural streamflow-缪驰远&#xff08;北京师范大学地理科学学部&#xff09; 研究内容&#xff1a…...

落枕、肩颈酸痛,用磁疗就可缓解!

睡觉之前还是好好的&#xff0c;一觉醒来脖子莫名疼痛&#xff0c;转都转不了&#xff0c;有时候连肩膀和上肢都难受&#xff0c;很可能是“落枕”了。 落枕引起的肩颈疼痛与多种因素有关&#xff0c;如颈肩部肌肉的过度使用、不良的睡眠姿势或颈肩部受寒湿空气的侵袭&#xff…...

一文教会你如何选择远程桌面(五大主流远程软件全面讲解)

写在前面 作为程序员的我们&#xff0c;随时随地写代码改代码是我们的日常。刚回到家&#xff0c;就被老板、产品经理cue是常有的事。基于这种情况&#xff0c;一般都会随身携带电脑&#xff0c;随时备战&#xff0c;不过每天背着电脑上下班非常不方便。因此资深程序员的解决方…...

【yolov5】yolov5训练自己的数据集全流程----包含本人设计的快速数据处理脚本

关于yolo应用时能用到的脚本集合&#xff0c;推荐收藏&#xff1a; https://chenlinwei.blog.csdn.net/article/details/127299428 1. 工程化快速yolo训练流程指定版&#xff08;无讲解&#xff09; 1.1 抽样数据集xml转txt输出量化分析 python make_dataset.pymake_dataset…...

leaflet 加载CSV数据,显示图形(代码示例046)

第046个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中加载CSV文件,将图形显示在地图上。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来练习 文章目录 示例效果配置方式示例源代码(共74…...

百趣代谢组学资讯:槟榔的基因组为雌雄同株植物的性别决定提供见解

文章标题&#xff1a;The genome of Areca catechu provides insights into sex determination of monoecious plants 发表期刊&#xff1a;New Phytologist 影响因子&#xff1a;10.323 作者单位&#xff1a;海南大学 百趣生物提供服务&#xff1a;植物激素高通量靶标定…...

SSO单点登录 - 多系统,单一位置登录,实现多系统同时登录 学习笔记

(1)单点登录 多系统的前提下&#xff0c;单一位置的登录&#xff0c;会实现多系统同时登录的一种技术。 常出现在互联网应用和企业级平台中 如&#xff1a;京东 单点登录一般是用于互相授信的系统&#xff0c;实现单一位置登录&#xff0c;全系统有效的。 注意&#xff1a…...

图解LeetCode——剑指 Offer 32 - III. 从上到下打印二叉树 III

一、题目 请实现一个函数按照之字形顺序打印二叉树&#xff0c;即&#xff1a;第一行按照从左到右的顺序打印&#xff0c;第二层按照从右到左的顺序打印&#xff0c;第三行再按照从左到右的顺序打印&#xff0c;其他行以此类推。 二、示例 2.1> 示例1 提示&#xff1a; …...

【快排与归并排序算法】

作者&#xff1a;指针不指南吗 专栏&#xff1a;算法篇 &#x1f43e;或许会很慢&#xff0c;但是不可以停下&#x1f43e; 文章目录一、快速排序 ( Quick Sort )二、归并排序 ( Merge Sort )总结一、快速排序 ( Quick Sort ) 1.思路 找出一个分界点&#xff0c;随机的调整区间…...

面试官问我:说说你对JMM内存模型的理解?为什么需要JMM?

点个关注&#xff0c;必回关 随着CPU和内存的发展速度差异的问题&#xff0c;导致CPU的速度远快于内存&#xff0c;所以现在的CPU加入了高速 缓存&#xff0c;高速缓存一般可以分为L1、L2、L3三级缓存。基于上面的例子我们知道了这导致了缓存一致 性的问题&#xff0c;所以加入…...

工程管理系统源码之提高工程项目管理软件的效率

高效的工程项目管理软件不仅能够提高效率还应可以帮你节省成本提升利润 在工程行业中&#xff0c;管理不畅以及不良的项目执行&#xff0c;往往会导致项目延期、成本上升、回款拖后&#xff0c;最终导致项目整体盈利下降。企企管理云业财一体化的项目管理系统&#xff0c;确保…...

SpringBoot集成xxl-job实现

SpringBoot集成xxl-job实现 一、xxl-job介绍 xxl-job是一个分布式任务调度平台&#xff0c;核心设计目标是开发迅速、学习简单、轻量级、易扩展。源码&#xff1a;下载地址编译环境&#xff1a;Maven3、Jdk1.8、MySQL5.7 二、调度中心 初始化调度数据库&#xff0c;执行指定…...

欧几里得度量和余弦度量的可取消生物识别方案

欧几里得度量和余弦度量的可取消生物识别方案 便捷的生物识别数据是一把双刃剑&#xff0c;在为生物识别认证系统的繁荣铺平道路的同时&#xff0c;也带来了个人隐私问题。为了缓解这种担忧&#xff0c;提出了各种生物特征模板保护方案来保护生物特征模板免于信息泄露。现有提案…...

平板作为主机扩展屏的实现

网上有许多教程使用平板作为电脑的拓展屏&#xff0c;但是多数都是需要在电脑和平板上都装上服务器和客户端的软件才行&#xff0c;而且有些系统还没有对应的软件。 那有没有一种方法只需要在主机上运行一个软件&#xff0c;而平板上只需要扫个码就行呢&#xff1f; 答案是当然…...

HTTP和HTTPS有什么区别?如何实现网站的HTTPS?

细心的朋友会发现&#xff0c;我们在浏览网站时&#xff0c;有的网址以http开头&#xff0c;而有的网站却以https开头&#xff0c;那这两者之间有什么区别吗&#xff1f;http的网站如何能变成https呢&#xff1f;本文中科三方针对这个问题做下简单介绍。 什么是http&#xff1…...

Rockstar Games遭黑客攻击,《侠盗猎车手6》90个开发视频外泄

当地时间9月19日&#xff0c;视频游戏开发商Rockstar Games证实&#xff0c;其 热门游戏《侠盗猎车手6》&#xff08;Grand Theft Auto&#xff09;开发片段遭到黑客大规模窃取 &#xff0c;这一泄露事件立即在游戏圈迅速传播。 据报道&#xff0c; 上周末黑客至少泄露了90个游…...

RabbitMQ-客户端源码之AMQPImpl+Method

AMQPImpl类包括AMQP接口&#xff08;public class AMQImpl implements AMQP&#xff09;主要囊括了AMQP协议中的通信帧的类别。 这里以Connection.Start帧做一个例子。 public static class Connection {public static final int INDEX 10;public static class Startextends…...

雅思经验(7)

我发现雅思阅读要命的不是难度&#xff0c;而是时间的把控。考试时间是总共一小时&#xff0c;但是要写三篇文章&#xff0c;之后总共40道题目&#xff0c;也就是说每篇文章平均是13.3道。但是他们很多人说&#xff0c;如果誊写答案需要花掉3、4分钟每篇&#xff0c;也就是说真…...

PlugY完整指南:暗黑破坏神2终极单机优化解决方案

PlugY完整指南&#xff1a;暗黑破坏神2终极单机优化解决方案 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY PlugY是《暗黑破坏神2&#xff1a;毁灭之王》最强大的单…...

2PG450x500双齿辊破碎机CAD装配图

2PG450x500双齿辊破碎机CAD装配图是机械设计领域中用于呈现设备整体结构的关键学习资料。该设备通过两个同步旋转的齿辊实现物料的破碎功能&#xff0c;其核心作用在于将大块物料均匀破碎至指定粒度&#xff0c;满足后续加工或输送需求。装配图以二维工程语言精准描述各部件的相…...

【笔试真题】- 小红书-2026.03.25-第二套

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 小红书-2026.03.25-第二套 题目一:A先生的用户数据整理 把每条记录的三个字段按类型识别出来即可:带小数点的是经验值,全小写字符串是用户名,剩下的整数就…...

新手必看,在快马平台上手mcp,从零理解模型上下文协议的核心机制

今天想和大家分享一个特别适合新手理解MCP&#xff08;模型上下文协议&#xff09;的小项目。作为一个刚接触AI开发不久的人&#xff0c;我发现在InsCode(快马)平台上学习这些概念特别方便&#xff0c;尤其是它能把复杂的协议用实际代码展示出来。 MCP简单来说就是AI模型和外部…...

别再死记硬背了!用一次完整的网页访问,帮你彻底搞懂HCIA/HCIP里的TCP/IP和OSI模型

从输入网址到页面加载&#xff1a;用真实场景拆解TCP/IP与OSI模型 想象一下这个场景&#xff1a;你在浏览器地址栏输入"www.baidu.com"&#xff0c;按下回车键&#xff0c;不到一秒就看到了熟悉的搜索页面。这看似简单的操作背后&#xff0c;隐藏着一场精密的网络协议…...

LeaguePrank:5分钟学会英雄联盟个性化美化工具终极指南 [特殊字符]

LeaguePrank&#xff1a;5分钟学会英雄联盟个性化美化工具终极指南 &#x1f3ae; 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 想要在英雄联盟中展示与众不同的个人形象吗&#xff1f;LeaguePrank 正是你需要的个性化美化工…...

IPv6支持不足?选用双栈兼容IP离线库,平滑过渡

上个月&#xff0c;我接手了一个线上报修&#xff1a;某客户的内网监控系统突然查不到部分IP的归属地了。登录服务器一看&#xff0c;日志里全是这种报错&#xff1a; Error: IP format not supported: 240e:3a0:xxxx::1 查代码发现&#xff0c;这套系统三年前上线时嵌了一个…...

C/C++中备受争议却难以替代的goto语句:效率与可读性的博弈

1. goto语句的前世今生 在C/C的世界里&#xff0c;goto就像是个"老古董"——它从1950年代的Fortran语言一路走来&#xff0c;至今仍在某些角落发光发热。我第一次在Linux内核代码里看到密密麻麻的goto时&#xff0c;整个人都懵了&#xff1a;这玩意儿不是教科书上明令…...

OpenClaw调试技巧:GLM-4.7-Flash任务执行日志分析与问题定位

OpenClaw调试技巧&#xff1a;GLM-4.7-Flash任务执行日志分析与问题定位 1. 为什么需要关注OpenClaw的调试日志 上周我在尝试用OpenClaw自动整理项目文档时&#xff0c;遇到了一个奇怪的现象&#xff1a;任务明明显示执行成功&#xff0c;但最终生成的Markdown文件却缺失了关…...

AI 模型精度与性能的权衡

AI模型精度与性能的权衡&#xff1a;寻找最佳平衡点 在人工智能领域&#xff0c;模型的精度与性能往往是一对矛盾体。精度代表模型预测的准确性&#xff0c;而性能则涉及计算速度、资源占用和实时性等指标。开发者常常需要在两者之间做出权衡&#xff0c;以满足不同场景的需求…...