小程序引入vant-Weapp保姆级教程及安装过程的问题解决

news2024/11/19 1:34:09

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」,赢取创作大礼包,挑战创作激励金

当你想在小程序里引入vant时,第一步:打开官方文档,第二步:切到快速上手,然后开始步骤一、步骤二、步骤三?

image-20210925093852009

你只会看到

image-20210925094920494

--------------------------以下是正文-------------------------

如果正准备安装,可以直接跳到下面的【正确的安装姿势】一步一步走,就不会出现问题啦!

问题汇总

可能出现的一些问题汇总

问题一:构建npm,提示找不到package.json文件

按官网,步骤一,通过npm安装,这个时候还没问题,但是当你到第四步点击【构建npm】时,就可能出现

image-20210925104011474

所以在npm安装时,先确保package.json存在,不存在的话先npm init初始化一下项目。新建小程序,默认是没有package.json文件的(嗯反正我的没有🤔)

问题二:构建npm,未找到miniprogram文件

有package.json文件之后,再次点击【构建npm】,又提示

image-20210925104048843

如果出现未找到miniprogram的情况,则自行在根目录创建miniprogram解决这个问题。

问题三:构建npm成功,但是miniprogram里没东西

image-20210925113320459

如果是先npm安装了,发现没有package.json再进行创建的话,package.json里并没有你的依赖信息,所以构建为空。

image-20210925105444951

重新执行npm i @vant/weapp -S --production,在点击构建即可

image-20210925113410473

问题四:引入报错

以为终于安装完可以开始用了,但是.....还是报错!!!

image-20210925101654057

按照快速上手的方法引入组件时,会出现此路径错误

image-20210901143347733

官网是这样

image-20210925101957491

我们需要改成

 

css

复制代码

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

好了,终于用上了。

image-20210925105808938

正确的安装姿势

我们根据以上错误分析,结合官网步骤,来解锁正确的安装姿势

image-20210925110006061

第一步:创建小程序

image-20210925110213893

当前的目录文件是这样的

image-20210925110325999

第二步:先执行

 

csharp

复制代码

npm init

生成package.json文件,我做测试,就直接一直回车了,这个可根据自己需求配置

image-20210925110615636

第三步:通过npm安装(官网步骤一)

 

css

复制代码

npm i @vant/weapp -S --production

image-20210925110705708

第四步: 修改 app.json(官网步骤二)

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

image-20210925110805809

第五步:修改 project.config.json(官网步骤三)

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

 

json

复制代码

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

image-20210925111000290

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

第六步:在根目录新增miniprogram文件夹

image-20210925111128059

第七步:构建npm包(官网步骤四)

image-20210925111246836

image-20210925111428355

构建完成之后,你会在miniprogram文件看到vant的文件夹,这样代表安装成功,可以开始使用了。

image-20210925111346825

第八步:引入使用

app.jsonindex.json中引入组件

 

css

复制代码

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

image-20210925111644625

然后在wxml就可以开始使用了

image-20210925111749950

结语

如果现在不需要使用那就赶紧收藏一下,万一之后就要用了呢!

image.png


最后再教大家一个小技巧,看图片,对就是头像旁边的那个小手点一下

点赞.gif

作者:Axjy
链接:https://juejin.cn/post/7011742207073845278
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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

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

相关文章

Linux C/C++实现SSL的应用层VPN (MiniVPN)

SSL协议和VPN(虚拟私人网络)原理是网络安全领域中的两个重要概念。 SSL协议,全称安全套接层(Secure Sockets Layer),是一种广泛应用于互联网的安全协议,主要在两个通信端点之间建立安全连接&am…

深度解剖数据在栈中的应用

> 作者简介:დ旧言~,目前大一,现在学习Java,c,c,Python等 > 座右铭:松树千年终是朽,槿花一日自为荣。 > 望小伙伴们点赞👍收藏✨加关注哟💕&#x1…

Vue 2 组件间的通信方式总结

引言 组件间的关系有父子关系、兄弟关系、祖孙关系和远亲关系。 不同的关系间&#xff0c;组件的通信有不同的方式。 一、prop 和 $emit prop向下传递&#xff0c;emit向上传递。 父组件使用 prop 向子组件传递信息。 ParentComponent.vue <template><div><…

红心向阳 百鸟朝凤

背景 最近在玩 folium 模块&#xff0c;基于使用过程中的一些个人体验&#xff0c;对 folium 进行了二次封装&#xff0c;开源在 GpsAndMap.在使用的过程中&#xff0c;发现在地图上打图标是可以进行旋转的。遇到就发现了一些有意思的玩法。 隔海的相望 下面的代码在地图 厦…

GIS跟踪监管系统信息查询

GIS跟踪监管系统信息查询 GIS跟踪监管系统&#xff08;1&#xff09;物资查询与展示。① 几何查询。代码说明&#xff1a;② 物资定位。• 单个物资定位&#xff1a;• 多个物资定位&#xff1a;③ 物资统计。&#xff08;2&#xff09;物资信息更新① 新增物资。 GIS跟踪监管系…

【项目经验】:elementui表格中数字汉字排序问题及字符串方法localeCompare()

一.需求 表格中数字汉字排序&#xff0c;数字按大小排列&#xff0c;汉字按拼音首字母&#xff08;A-Z&#xff09;排序。 二.用到的方法 第一步&#xff1a;把el-table-column上加上sortable"custom" <el-table-column prop"date" label"序号…

第七章 查找 一、查找的基本概念

一、基本概念 查找——在数据集合中寻找满足某种条件的数据元素的过程称为查找。 查找表(查找结构)——用于查找的数据集合称为查找表&#xff0c;它由同一类型的数据元素(或记录)组成。 关键字——数据元素中唯一标识该元素的某个数据项的值&#xff0c;使用基于关键字的查…

2023年的深度学习入门指南(27) - CUDA的汇编语言PTX与SASS

通过前面的学习&#xff0c;我们了解了在深度学习和大模型中&#xff0c;GPU的广泛应用。可以说&#xff0c;不用说没有GPU&#xff0c;就算是没有大显存和足够先进的架构&#xff0c;也没法开发大模型。 有的同学表示GPU很神秘&#xff0c;不知道它是怎么工作的。其实&#x…

Vue2.7 封装 Router@4 的 hook

1、问题 在 Vue2.7 中&#xff0c;尤大大是支持大部分 Vue3 的功能&#xff0c;并且支持使用 CompositionAPI 的写法&#xff0c;也支持 script setup 的便捷语法&#xff0c;但是 Vue2 对应的 Vue-router3 库并没有提供 hook 对应的支持&#xff0c;所以需要我们自行封装 Vue…

代码对比工具,都在这了

Git Diff Git是一个流行的分布式版本控制系统&#xff0c;它内置了代码对比功能。使用git diff命令可以比较两个不同版本的代码文件&#xff0c;也可以使用图形化的Git客户端进行可视化对比。 git diff 命令 | 菜鸟教程www.runoob.com/git/git-diff.html Diff diff是一个Un…

NAND价格第4季度回暖,现在是SSD入手时机吗?

这两天有粉丝后台在咨询购买SSD相关的问题。小编也好奇的搜下当前业内SSD品牌。不搜不知道&#xff0c;一搜吓一跳&#xff0c;将近200多个品牌。 那么&#xff0c;买SSD应该买什么品牌&#xff1f;现在是否可以入手SSD呢&#xff1f; 1.固态硬盘SSD的原理 我们首先了解下固态…

兄弟DCP-7080激光打印机硒鼓清零方法

兄弟DCP-708打印机清零方法?兄弟DCP-7080打印机的硒鼓计数器是用来记录硒鼓使用寿命的&#xff0c;当硒鼓使用寿命达到一定程度时&#xff0c;打印机会提示更换硒鼓。如果用户更换了硒鼓&#xff0c;但打印机仍提示需要更换&#xff0c;这时需要进行清零操作&#xff0c;详细请…

xen-gic初始化流程

xen-gic初始化流程 调试平台使用的是gic-600&#xff0c;建议参考下面的文档来阅读代码&#xff0c;搞清楚相关寄存器的功能。 《corelink_gic600_generic_interrupt_controller_technical_reference_manual_100336_0106_00_en》 《IHI0069H_gic_architecture_specification》…

基于SSM的实验室开放管理系统设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

「信号与系统」语音信号的语谱图、尺度变化、带限处理、基音提取

「信号与系统」语音信号的语谱图、尺度变化、带限处理、基音提取 本文将简单介绍几种语音信号的处理方法。 1、语谱图 语谱图是一种描述语音信号频率特征的方法&#xff0c;横轴表示时间&#xff0c;纵轴表示频率&#xff0c;颜色深浅表示能量。基本原理是将语音信号分帧&am…

js中this的原理详解(web前端开发javascript语法基础)

欢迎关注作者微信公众号&#xff1a;愤怒的it男 一、问题的由来 学懂 JavaScript 语言&#xff0c;一个标志就是理解下面两种写法&#xff0c;可能有不一样的结果。 var angry_it_man {name : 欢迎关注微信公众号&#xff1a;angry_it_man,say : function(){console.log(thi…

学习SLAM:SLAM进阶(十)暴力更改ROS中的PCL库

话不多说&#xff0c;上活 1.1 为什么要这么做 项目中有依赖。。。。 1.2 安装VTK7.1.1 PCL1.8.0 略 1.3 移植到ROS 删除ROS依赖的vtk6.2和PCL1.8.0的动态链接库&#xff1a; liugongweiubuntu:~$ sudo mv /usr/lib/x86_64-linux-gnu/libvtk* Desktop/lib/ [sudo] password fo…

windows平台 git bash使用

打开所在需要git管理的目录,鼠标右键open Git BASH here 这样就直接进来,不需要windows dos窗口下麻烦的切路径&#xff0c;windows和linux 路径方向不一致 (\ /) 然后git init 建立本地仓库,接下来就是git相关的操作了. 图形化界面查看 打开所在需要git管理的目录,鼠标右键…

DipC 构建基因组 3D 结构(学习笔记)

背景 本文主要记录了 DipC 数据的复现过程、学习笔记及注意事项。 目录 下载 SRA 数据使用 SRA Toolkit 转换 SRA 数据为 Fastq 格式使用 bwa 比对测序数据使用 Hickit 计算样本的基因组 3D 结构使用散点图展示 3D 结构计算 3D 结构重复模拟的稳定性其他 步骤 1. 下载 SRA…

从输入一个网址到浏览器页面展示到底发生了什么

从输入一个网址到浏览器页面展示到底发生了什么 1. HTTP 解析URL 首先浏览器做的第一步工作就是解析URL&#xff0c;从而生产一个发送给服务器的请求信息。 URL是什么呢&#xff0c;见下图&#xff1a; 图中长长的URL实际上是请求服务器里的文件资源。 要是上图中的蓝色部分…