微信小程序导入Vant Weapp ui组件库2023年最新版

news2024/11/13 8:59:26

微信小程序导入Vant Weapp ui组件库2023年最新版

写这篇文章的原因是Vant Weapp的官方文档快速上手是有一定的问题的,没错,我就是那个试错的人,弄了一下午才发现问题所在,所以写了一篇正确的导入教程。

第一步:在项目所在目录打开控制台
请添加图片描述

第二步:查看自己电脑npm的版本,如果有会有版本号显示,没有则需要去下载。

npm -v

请添加图片描述

第三步:npm 初始化

npm init -y

在这里插入图片描述

第四步:下载vant weapp

npm i @vant/weapp -S --production

在这里插入图片描述

第五步:将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
在这里插入图片描述
在这里插入图片描述

第六步:构建npm,小程序中的插件只有构建了才能被识别正常使用。切记不要按照官方文档中的快速上手修改project.config.json中的字段,否则会构建失败。
在这里插入图片描述
在这里插入图片描述

第七步:到此vant weapp即可正常使用,使用方法请看官方文档:vant weapp官方文档

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

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

相关文章

Python进阶 │反爬虫和怎样反反爬虫

爬虫、反爬虫和反反爬虫是网络爬虫工作过程中一直伴随的问题。 在现实生活中,网络爬虫的程序并不像之前介绍的爬取博客那么简单,运行效果不如意者十有八九。首先需要理解一下“反爬虫”这个概念,其实就是“反对爬虫”。根据网络上的定义&…

PowerShell:因为在此系统上禁止运行脚本,解决方法

运行powershell脚本遇见报错: 无法加载文件 C:\Users\DH\Desktop\cs\rename.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID135170 中的 about_Execution_Policies。 查了查之后发现是在计算…

差动测试棒如何连接到示波器

差动测试棒提供一个安全的绝缘仪器给示波器使用,它可以转换由高输入的差动电压进入一个低电压并且显示波形在示波器上,使用频率高达100MHz,非常适合大电力测试、研发使用。 差动测试棒输出标是设计在操作示波器1MΩ的输入阻抗的相对衰减量&a…

人工智能学习07--pytorch20--目标检测:COCO数据集介绍+pycocotools简单使用

如:天空 coco包含pascal voc 的所有类别,并且对每个类别的标注目标个数也比pascal voc的多。 一般使用coco数据集预训练好的权重来迁移学习。 如果仅仅针对目标检测object80类而言,有些图片并没有标注信息,或者有错误标注信息。…

需求:js给html添加css

目前发送请求&#xff0c;请求回html&#xff1a;<div class"articleRecommendation_con"> <a href"https://weekly.caixin.com/2023-05-26/102059365.html"><img src"https://img.caixin.com/2023-05-27/168515251870385…

如何选择适合平台的直播美颜SDK:从技术和商业角度考虑

直播美颜SDK作为一种技术解决方案&#xff0c;可以帮助直播应用实现优秀的美颜效果&#xff0c;提高用户体验和粘性。然而&#xff0c;如何选择适合你应用的直播美颜SDK&#xff0c;需要从技术和商业角度综合考虑。本文将从这两个角度出发&#xff0c;为你介绍如何选择适合你应…

手把手带你读vue2文档(基础篇总结)

目录 声明式渲染 v-bind v-if条件与循环 name命名 学会log打印 一些js方法 双向绑定v-model和v-bind 那么请实现一个复选框吧 自定义标签模板 vue2实例 数据与方法 你提到vue有两种数据和方法&#xff0c;js是不是只有一种 vue2自带的实例和方法 vue2$会和jQuery冲…

四站精彩回顾 | Fortinet Accelerate 2023·中国区巡展火热进行中

Fortinet Accelerate 2023中国区巡展 上周&#xff0c;Fortinet Accelerate 2023中国区巡展分别走过青岛、南京、长沙、合肥四站&#xff0c;Fortinet携手太平洋电信、亚马逊云科技、中企通信等云、网、安合作伙伴&#xff0c;与各行业典型代表客户&#xff0c;就网安融合、网…

spring事务管理详解和实例(事务传播机制、事务隔离级别)

目录 1 理解spring事务 2 核心接口 2.1 事务管理器 2.1.1 JDBC事务 2.1.2 Hibernate事务 2.1.3 Java持久化API事务&#xff08;JPA&#xff09; 2.2 基本事务属性的定义 2.2.1 传播行为 2.2.2 隔离级别 2.2.3 只读 2.2.4 事务超时 2.2.5 回滚规则 2.3 事务状态 3…

盘点索引常见的11个知识点

今天来盘点一下关于MySQL索引常见的知识点 本来这篇文章我前两个星期就打算写了&#xff0c;提纲都列好了&#xff0c;但是后面我去追《漫长的季节》这部剧去了&#xff0c;这就花了一个周末的时间&#xff0c;再加上后面一些其它的事&#xff0c;导致没来得及写 不过不要紧&…

chatgpt赋能python:Python中0的输入方法:完整指南

Python中0的输入方法&#xff1a;完整指南 Python是一门强大的编程语言&#xff0c;广泛应用于数据分析、人工智能、网络应用等领域。在Python中&#xff0c;输入0有多种方法&#xff0c;因此本文将带您深入了解Python中0的输入方式&#xff0c;包括基础类型、字符串和列表等结…

【计算机网络】网络安全,HTTP协议,同源策略,cors,jsonp

❤️ Author&#xff1a; 老九 ☕️ 个人博客&#xff1a;老九的CSDN博客 &#x1f64f; 个人名言&#xff1a;不可控之事 乐观面对 &#x1f60d; 系列专栏&#xff1a; 文章目录 网络安全非对称加密中间人攻击 HTTP协议同源策略corsjsonp 网络安全 非对称加密 会生成一个公…

Arm发布最新内核 : Corte-X4/A720/A520,支持Armv9.2

1、背景 Arm 是一家设计智能手机的CPU内核的公司&#xff0c;并且每年它都会进行新的迭代&#xff0c;这些迭代随后将集成进芯片SOC&#xff0c;例如当年的旗舰 Snapdragon 、 MediaTek Dimensity。2023年&#xff0c;发布了新的旗舰级内核&#xff1a; Cortex-X4 超大核、Cort…

数据集成到可视化分析,轻松驾驭数据洞察力:ETLCloud与帆软BI完美结合

在当今数据驱动的业务环境中&#xff0c;企业需要快速而准确地获取、处理和分析大量的数据。为了满足这一需求&#xff0c;ETLCloud通过和帆软BI的集成提供了一种强大的数据采集和数据分析解决方案&#xff0c;通过可视化的ETL工具和灵活的BI功能&#xff0c;帮助企业快速实现高…

【笔记整理】元学习笔记

【笔记整理】元学习笔记 文章目录 【笔记整理】元学习笔记一、元学习基础概念1、概述&#xff08;“多任务&#xff0c;推理&#xff0c;快速学习”&#xff09;1&#xff09;Meta-learning&#xff08;“学习如何学习” “老千层饼”&#xff09;2&#xff09;Transfer learn…

JDBC查询数据库——普通、流式、游标

问题 通过JDBC对MySQL进行数据查询时&#xff0c;有个很容易踩的坑&#xff0c;以下面代码为例&#xff1a; public static void selectNormal() throws SQLException{Connection connection DriverManager.getConnection("jdbc:mysql://localhost:3306/test", &qu…

【一次调频】考虑储能电池参与一次调频技术经济模型的容量配置方法(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【IEEE/TOP录用】中科院2区TOP仅3个月录用~

一、【录用案例】 喜提一篇IEEE旗下中科院2区TOP录用&#xff1b; 2023/1/31提交&#xff0c;2023/5/26录用&#xff0c;仅3个月零26天录用&#xff1b; 传感器类SCIE&EI 【IF及分区】IF:4&#xff0c;JCR1/2区&#xff0c;中科院2区&#xff1b; 【检索情况】SCIE&E…

c语言编程练习题:7-42 整除光棍

#include <stdio.h>int main() {int x,s1,n1;scanf("%d",&x);while(s<x){ss*101;n;}while(1) {printf("%d",s/x); if(s%x0) break;s(s%x)*101;n;}printf(" %d",n);return 0; }代码来自&#xff1a;https://yunjinqi.top/article/16…

pdf如何转换成jpg图片?

pdf如何转换成jpg图片&#xff1f;PDF&#xff08;Portable Document Format&#xff09;是一种常见的文件格式&#xff0c;由Adobe Systems创建。与其他文档格式相比&#xff0c;它具有固定页面布局和跨平台兼容性等优点&#xff0c;因此广泛应用于电子书、论文、技术手册、合…