小程序引入 Vant Weapp 极简教程

一切以 Vant Weapp 官方文档 为准

Vant Weapp 官方文档 - 快速入手

1. 安装nodejs

前往官网下载安装即可

nodejs官网

安装好后 在命令行(win+r,输入cmd)输入

node -v

若显示版本信息,即为安装成功

在这里插入图片描述

2. 在 小程序根目录 命令行/终端 执行命令

开发工具 - 目录 - 右键 - 在外部中端窗口打开

在这里插入图片描述
或者

小程序项目目录 - 搜索栏 - 输入cmd - 回车

在这里插入图片描述

3. 执行命令

初始化package.json
后面加上 -y ,表示所有选项都选择 yes,就不需要每一项都手动选择 yes 选项

npm init -y

通过 npm 安装

npm i @vant/weapp -S --production

4. 设置npm

工具 - 构建npm

在这里插入图片描述

5. 去除小程序基础组件样式

将 app.json 中的 "style": "v2" 去除

小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

6. 引入组件

以 Button 组件为例,只需 在app.json或index.json中配置 Button 对应的路径

建议在app.json中配置,全局配置更加方便,不必在每一个index.json中反复配置

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

7. 使用组件

引入组件后,可以 在 wxml 中直接使用组件

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

8. 构建npm常见问题

提示:没有找到可以构建的NPM包,请确认需要参与…
在这里插入图片描述
解决办法:
找到根目录下的 project.config.json 文件
修改 packNpmManually 和 packNpmRelationList

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

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

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

相关文章

C++类的小结

1、类定义 使用class关键字定义类。 类名通常以大写字母开头&#xff0c;以符合命名规范。 类包含成员变量&#xff08;也称为属性或数据成员&#xff09;和成员函数&#xff08;也称为方法或行为&#xff09;。 class MyClass { public: int x; // 数据成员 void setX…

yolov5网络结构图要点和难点实际案例和代码解析

YOLOv5网络结构图主要可以分为四个部分:输入端(Input)、Backbone(主干网络)、Neck(颈部)和Prediction(输出端)。以下是对这四个部分的简要说明: 输入端(Input): 数据增强:YOLOv5在输入端使用了Mosaic数据增强技术,这是一种将四张训练图像混合成一张的方式,可以…

【Gateway远程开发】0.5GB of free space is necessary to run the IDE.

【Gateway远程开发】0.5GB of free space is necessary to run the IDE. 报错 0.5GB of free space is necessary to run the IDE. Make sure that there’s enough space in following paths: /root/.cache/JetBrains /root/.config/JetBrains 原因 下面两个路径的空间不…

【OpenNJet下一代云原生之旅】

OpenNJet下一代云原生之旅 1、OpenNJet的定义OpenNJet架构图 2、OpenNJet的特点性能无损动态配置灵活的CoPilot框架支持HTTP/3支持国密企业级应用高效安全 3、OpenNJet的功能特性4、OpenNJet的安装使用编译安装配置yum源创建符号连接修改配置编译 5、通过 OpenNJet 部署 WEB SE…

MySQL数据库——19、ALTER 命令

MySQL 中的 ALTER 命令用于修改现有的数据库表&#xff0c;可以执行多种操作&#xff0c;例如添加、删除、修改列&#xff0c;修改表的名称或数据类型等。下面是一些常见的 ALTER 命令及其作用&#xff1a; 添加列&#xff1a;用于向现有表中添加新的列。 ALTER TABLE table_n…

【kafka】docker容器bitnami/kafka使用SASL鉴权(无TLS)

背景 最近在学习kafka消息队列&#xff0c;了解到kafka是通过SASL来进行用户认证的。起初&#xff0c;因为btinami/kafka官方的一段内容让我以为SASL和TLS是绑定使用的&#xff0c;导致心思花在解决TLS配置上去&#xff0c;官方原文如下&#xff1a; You must also use your o…

基于OpenCv的图像特征点检测

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

【设计模式】函数式编程范式工厂模式(Factory Method Pattern)

目录标题 定义函数式接口函数式接口实现类工厂类封装实际应用总结 定义函数式接口 ISellIPad.java /*** 定义一个函数式接口* param <T>*/ FunctionalInterface public interface ISellIPad<T> {T getSellIPadInfo();}函数式接口实现类 HuaWeiSellIPad.java pu…

rust数据类型转换,as和TryInto使用

Rust 是类型安全的语言&#xff0c;因此在 Rust 中做类型转换不是一件简单的事&#xff0c;这一章节我们将对 Rust 中的类型转换进行详尽讲解。 as转换 先来看一段代码&#xff1a; fn main() {let a: i32 10;let b: u16 100;if a < b {println!("Ten is less tha…

无U盘基于本地硬盘无损制作虚拟U盘(Windows、Linux系统安装启动盘)

知识点 实验环境 名称版本使用平台Win11本地硬盘格式GPT待安装镜像deepin-desktop-community-20.9-amd64.iso 文中工具下载链接&#xff1a; https://download.csdn.net/download/xzzteach/89263714 deepin-desktop-community-20.9-amd64.iso 文件结构如下&#xff1a; 在Li…

多功能在线二维码生成源码

上传即可使用&#xff0c;可以把电子名片、文本、wifi网络、电子邮件、短信、电话号码、网址等信息生成对应的二维码图片。 多功能在线二维码生成源码

10G MAC层设计系列-(4)MAC TX模块

一、前言 MAC TX模块就是要将IP层传输过来的数据封装前导码、MAC地址、帧类型以及进行CRC校验&#xff0c;并与CRC值一块组成以太网帧。 二、模块设计 首先对输入的数据进行缓存&#xff0c;原因是在之后要进行封装MAC帧头&#xff0c;所以需要控制数据流的流动 FIFO_DATA_6…

Linux内核深入学习 - 中断与异常(上)

中断与异常 中断通常被定义为一个事件&#xff1a;让事件改变处理器执行的指令顺序这样的事件&#xff0c;与CPU芯片内外部硬件电路产生的电信号相对应&#xff01; 中断通常分为同步中断与异步中断&#xff1a; 同步中断指的是当指令执行时&#xff0c;由CPU控制单元产生的…

2024最新信息系统项目管理师--【10大管理,49个子过程】

2024最新信息系统项目管理师--&#xff08;1抵100&#xff09;真题考过的十大管理点&#xff08;细致&#xff09; 5大管理过程组包括&#xff1a; ◆启动过程组&#xff1a;定义一个新项目或现有项目的一个新阶段&#xff0c;授权开始该项目或阶段的一组过程——千里之行、始…

简单聊聊JavaScript数组作为索引

开篇 如下的代码中&#xff0c;请猜一下代码的运行结果是多少&#xff1f; const res [5, 9, 3, 6][2, 3] console.log(res); 简述 也许你猜对了&#xff0c;也许猜错了&#xff0c;结果为6。 但我们的预期输出明明是[3, 6]才对&#xff0c;结果却只是最后一个索引值起了作用。…

力扣hot100:543. 二叉树的直径/108. 将有序数组转换为二叉搜索树

一、543. 二叉树的直径 LeetCode&#xff1a;543. 二叉树的直径 二叉树的直径 二叉树的 直径 是指树中任意两个节点之间最长路径的 长度 。 遇到二叉树的问题很容易去直接用求解的目标去定义递归函数。但是仔细考虑&#xff0c;返回树的直径并不能向上传播。因此我们可以拆…

2024抖音直播带货-直播间拆解:抖店运营从入门到精通(56节课)

起号原理方式以及节点处理 类目的选择选品思路 付费流量投放原理 直播间进阶玩法 课程内容 直播间搭建标准自然起号(0-1)原理 方式 以及节点处理 老号重启(0-1)原理 方式 以及节点处理 账号在线人数稳定 原理 方式 以及节点处理 账号销售额放大 原理 方式 以及节点处理…

IoTDB 入门教程 基础篇⑨——TsFile导入导出工具

文章目录 一、前文二、准备2.1 准备导出服务器2.2 准备导入服务器 三、导出3.1 导出命令3.2 执行命令3.3 tsfile文件 四、导入4.1 上传tsfile文件4.2 导入命令4.3 执行命令 五、查询六、参考 一、前文 IoTDB入门教程——导读 数据库备份与迁移是数据库运维中的核心任务&#xf…

【数组】Leetcode 88. 合并两个有序数组【简单】

合并两个有序数组 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 **注意&#xff1a;**最终…

内核workqueue框架

workqueue驱动的底半部实现方式之一就是工作队列&#xff0c;作为内核的标准模块&#xff0c;它的使用接口也非常简单&#xff0c;schedule_work或者指定派生到哪个cpu的schedule_work_on。 还有部分场景会使用自定义的workqueue&#xff0c;这种情况会直接调用queue_work和qu…