小程序引入 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…

【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…

基于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控制单元产生的…

力扣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…

内核workqueue框架

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

探索C++模板类的奥秘:从基础到实践的深度之旅

目录 引言 一、模板类基础 A. 何为模板类&#xff1f; B. 模板类与普通类的区别 二、模板类实例化及特化 C. 实例化模板类 D. 模板类特化 三、模板类的应用与实战 E. 示例分析&#xff1a;栈模板类实现 结论 引言 在C编程的世界里&#xff0c;模板这一特性如同魔法般…

wpf转换器

WPF&#xff08;Windows Presentation Foundation&#xff09;中的转换器主要是指IValueConverter接口的实现&#xff0c;它用于在数据绑定过程中转换源数据和目标数据的类型或表示形式。这种机制使得开发者能够灵活地处理数据&#xff0c;特别是在用户界面&#xff08;UI&…

基于SkyEye运行Android——应用最为广泛的移动设备操作系统

01.Android简介 Android&#xff08;安卓&#xff09;是一种基于Linux内核&#xff08;不包含GNU组件&#xff09;的开源操作系统&#xff0c;最初由安迪鲁宾开发&#xff0c;主要支持手机。2005年8月由Google收购注资&#xff1b;2007年11月&#xff0c;Google与84家硬件制造…

【C语言】/*函数栈帧的创建和销毁*/

目录 前言 一、知识补充 二、分析创建和销毁的过程 三、前言问题回答 前言 本篇主要讨论以下问题&#xff1a; 1. 编译器什么时候为局部变量分配的空间 2. 为什么局部变量的值是随机的 3. 函数是怎么传参的&#xff0c;传参的顺序是怎样的 4. 形参和实参是什么关系 5. 函数…

vue3--element-plus-抽屉文件上传和富文本编辑器

一、封装组件 article/components/ArticleEdit.vue <script setup> import { ref } from vue const visibleDrawer ref(false)const open (row) > {visibleDrawer.value trueconsole.log(row) }defineExpose({open }) </script><template><!-- 抽…

SSM+Vue+小程序+基于微信小程序的高校学生事务管理系统

项目配合学校日常生活通知&#xff0c;考试等管理需要&#xff0c;开发学校事务管理系统&#xff0c;maven管理依赖&#xff0c;mybatis处理数据库交互 学校管理 学院管理 班级管理 年级管理 教师管理 通知公告管理 学生资料管理 待办事项管理 教务处通知管理 讲座通…