微信小程序(二十)Vant组件库的配置

教程很详细,直接上过程

上一篇

官方文档也有,但是因为版本的更新,官方文档并没有跟着改变,这里我写一份最新版能用的教程

(口头禅还是不能少的🤣🤣🤣)

灵魂拷问:你安装了Nodejs吗?

😎😎😎没安装的先看这位大佬的博文Nodejs的安装与配置😎😎😎

安装好了正式进入主题

1. 初始化npm

原因:为了生成json文件记录安装依赖的依赖的有关信息

在这里插入图片描述

输入以下语句

npm init

如果出现终端无法输入的情况,先重启开发者工具,如果还是无效可以使用外部终端,如下(正常输入可以忽略)

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

此时会出现这个配置文件

在这里插入图片描述

2. 通过 npm 安装

输入以下内容

npm i @vant/weapp -S --production

报错了?一堆红色的错?

回想一下在前面的Node安装的博文里面的内容,是不是下载需要使用管理员权限
在cmd打开管理员窗口简单但在开发者工具终端怎么办呢
解决方法:(博文里面提到过的)
修改node_globalnode_cache文件夹的属性(此处演示一个,另一个同理)

在这里插入图片描述
修改完成后重新打开一下开发者工具,在终端输入前面说的的内容

等待ing(因人而异,有的是一会,有的是亿会

在这里插入图片描述

3.去掉app.js里面的"style": "v2"这句

在这里插入图片描述

4.修改 project.config.json

在这里插入图片描述

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

坚持坚持,最后一步了(从nodejs的下载配置到小程序组件的配置确实挺繁琐的🤣)

5.构建 npm 包

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

手痒痒不小心删了只要重复第五步再构建一遍就行🤣🤣🤣




测试是否成功

这里先重启一下开发者工具

npmTest.json

{"usingComponents": {"van-button": "@vant/weapp/button/index"}
}
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

演示效果:

在这里插入图片描述

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

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

相关文章

Android Studio 提示Use app:drawableStartCompat instead of android:drawableStart

每次提交代码时&#xff0c;AS这个老妈子总爱唠叨一堆warning&#xff0c;这些Warning都在讲什么&#xff1f; 1.Use app:drawableStartCompat instead of android:drawableStart 在Android开发中&#xff0c;android:drawableStart和app:drawableStartCompat是两个用于设置…

基于YOLOv8的摄像头吸烟行为检测系统(Python源码+Pyqt6界面+数据集)

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文主要内容:详细介绍了摄像头下吸烟行为检测系统&#xff0c;在介绍算法原理的同时&#xff0c;给出Pytorch的源码、训练数据集以及PyQt6的UI界面。在界面中可以选择各种图片、视频进行检测识别&#xff0c;可进行置信度、Iou阈值设定…

智能分析网关V4智慧冶金工厂视频智能监管方案

一、背景与需求 随着工业4.0的推进&#xff0c;冶金行业正面临着转型升级的压力。为了提高生产效率、降低能耗、保障安全&#xff0c;冶金智能工厂视频监管方案应运而生。该方案通过高清摄像头、智能分析技术、大数据处理等手段&#xff0c;对工厂进行全方位、实时监控&#xf…

详细解读vcruntime140_1.dll修复的手段,如何快速解决vcruntime140_1.dll丢失问题

当出现“无法找到vcruntime140_1.dll”或程序“未能正常启动”时&#xff0c;这通常指示系统中缺失了一个关键文件&#xff1a;vcruntime140_1.dll。作为Visual C Redistributable组件的一部分&#xff0c;这个小文件在很多用Visual Studio编译的C程序运行时发挥着重要作用。解…

2024/1/27 备战蓝桥杯 1-2

目录 金币 0金币 - 蓝桥云课 (lanqiao.cn) 天干地支 0天干地支 - 蓝桥云课 (lanqiao.cn) 明明的随机数 0明明的随机数 - 蓝桥云课 (lanqiao.cn) 浇灌 0灌溉 - 蓝桥云课 (lanqiao.cn) 金币 0金币 - 蓝桥云课 (lanqiao.cn) 思路&#xff1a;放两种情况&#xff08;k:代…

Qslog开源库使用

Qslog源码下载地址&#xff1a;https://github.com/victronenergy/QsLog 1.QSLOG使用方式 &#xff08;1&#xff09;源码集成 在你的工程中&#xff0c;直接包含QsLog.pri文件&#xff0c;进行源码集成。当然你也可以包含QsLog.pri后&#xff0c;编译为xx.dll&#xff0c;在…

MVCC原理讲解(深入浅出)

目录 一、什么是MVCC 二、当前读、快照读都是什么鬼 三、当前读 四、快照读 五、数据库的并发场景 六、MVCC解决并发的哪些问题 1.解决问题如下&#xff1a; 七、MVCC的实现原理 1.版本链 八、undo日志 1.undo log 的用途 2.undo log主要分为两种 九、Read View…

简洁思路推理 KMP 算法——子字符串匹配

例题 28. 找出字符串中第一个匹配项的下标 暴力遍历解法 枚举原串 ss 中的每个字符作为「发起点」&#xff0c;每次从原串的「发起点」和匹配串的「首位」开始尝试匹配&#xff1a; 匹配成功&#xff1a;返回本次匹配的原串「发起点」。 匹配失败&#xff1a;枚举原串的下一个…

UI自动化搭建背景及优劣势分析

经常有人会问&#xff0c;什么样的项目才适合进行UI自动化测试呢&#xff1f;UI自动化测试相当于模拟手工测试&#xff0c;通过程序去操作页面上的控件。而在实际测试过程中&#xff0c;经常会遇到无法找到控件&#xff0c;或者因控件定义变更而带来的维护成本等问题。 哪些场…

制作圆形Image

思路 绘制圆 &#xff0c;使用多个三角形组合在一起近似一个圆单位圆上的点使用(Cosx&#xff0c;Sinx)表示sprite的uv映射到单位圆上 点到UV的映射规律 Sprite的外部uv 为 (x y z w ) 原点为 (x,y) 宽度为z-x 高度为w-y 单位圆上的点为(CosA&#xff0c;SinA) uv坐标 (x,y…

Dockerfile实践

文章目录 1、多阶段构建2、ADD 与 COPY 指令示例 3、CMD指令示例 4、ENTRYPOINT指令示例 5、build-arg6、target与cache-from7、onbuild 1、多阶段构建 制作docker镜像时&#xff0c;遵循越小越好&#xff0c;尽量剔除不需要的内容。比如编译环境&#xff0c;程序编译完成之后…

Docker—入门及Centos7安装

1、Docker入门 1.1、Docker是什么&#xff1f; Docker是基于Go语言实现的云开源项目。 Docker的主要目标是“Build&#xff0c;Ship&#xff0c;and Run Any App,Anywhere”&#xff0c;也就是通过对应组件的封装、分发、部署、运行等生命周期的管理&#xff0c;使用户的APP&…

docker环境搭建及其安装常用软件

centos安装docker Install Docker Engine on CentOS | Docker Docs 下载docker sudo yum install -y yum-utils sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install -y docker-ce docker-ce-cli containerd.io…

JS如何上传视频后从视频截图到一张封面Cover?

文章目录 概要获取上传视频文件截图小结 概要 从上传视频文件中获取一张图片 获取上传视频文件截图 html片段&#xff0c;两个都是隐藏的 <!--自定义的上传视频标签--><input type"file" style"display: none" id"file" ref"uplo…

MongoDB本地部署并结合内网穿透实现公网访问本地数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 4. 结语 前言 MongoDB是一个基于分布式文件…

TCP 三次握手 四次挥手以及滑动窗口

TCP 三次握手 简介&#xff1a; TCP 是一种面向连接的单播协议&#xff0c;在发送数据前&#xff0c;通信双方必须在彼此间建立一条连接。所谓的 “ 连接” &#xff0c;其实是客户端和服务器的内存里保存的一份关于对方的信息&#xff0c;如 IP 地址、端口号等。 TCP 可以…

【前端基础--6】

对象 object // 定义一个obj来接收对象let obj {name: 咪咪,type: 布偶猫,like: [小鱼干, 猫条]}console.log(obj);// 取到obj里面name属性的值console.log(obj.name);// 使用大括号取值 括号内若不带引号&#xff0c;优先识别为变量console.log(obj[type]);// 通过等号进行…

【c语言】详解操作符(下)

前言&#xff1a; 在上文中&#xff0c;我们已经学习了 原码、反码、补码、移位 操作符、移位操作符、位操作符、逗号表达式、下标访问[ ]、函数调用&#xff08; &#xff09;&#xff0c;接下来我们将继续学习剩下的操作符。 1. 结构成员访问操作符 1.1 结构体成员的直接访…

台式电脑的ip地址在哪里找

在网络连接方面&#xff0c;IP地址是非常重要的信息&#xff0c;它是用于标识网络设备的唯一地址。对于台式电脑用户来说&#xff0c;了解自己设备的IP地址是非常有必要的&#xff0c;因为它可以帮助解决网络连接问题&#xff0c;进行远程访问和共享文件等功能。本文将指导读者…

深度学习知识

context阶段和generation阶段的不同 context阶段&#xff08;又称 Encoder&#xff09;主要对输入编码&#xff0c;产生 CacheKV(CacheKV 实际上记录的是 Transformer 中 Attention 模块中 Key 和 Value 的值&#xff09;&#xff0c;在计算完 logits 之后会接一个Sampling 采…