微信小程序安装和使用 Vant Weapp 组件库

微信小程序安装和使用 Vant Weapp 组件库

  • 1. Vant Weapp 介绍
  • 2. Vant Weapp 的 安装
    • 2.1. 通过npm安装
    • 2.2. 构建npm
    • 2.3. 修改 app.json
    • 2.4. 修改 project.congfig.json
    • 2.5. 测试一下,使用Vant Weapp提供的组件

1. Vant Weapp 介绍

在这里插入图片描述

Vant 是一个轻量、可靠的移动端组件库,于 2017 年开源。
目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序版本。

2. Vant Weapp 的 安装

在小程序项目上安装Vant Weapp,(你的电脑应该有npm环境才行)。

win + R 输入 npm -version 查看一下

在这里插入图片描述

如果没有安装node.js的话,可以参考一下这篇博客 NodeJs的安装

2.1. 通过npm安装

首先在项目的资源管理器中右键打开黑窗口,然后输入命令"npm init -y"

在这里插入图片描述

在这里插入图片描述

接着就可以看着官方文档来使用npm为当前项目安装Vant Weapp 了

npm i @vant/weapp@版本号 -S --production

在这里插入图片描述

2.2. 构建npm

选择导航栏中的工具,然后选择构建npm即可。

在这里插入图片描述

在这里插入图片描述

构建完npm之后,会多出一个文件夹 “minprogram_npm”

在这里插入图片描述

2.3. 修改 app.json

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

2.4. 修改 project.congfig.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogram,package.json 在其外部,npm 构建无法正常工作。
需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

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

在这里插入图片描述

2.5. 测试一下,使用Vant Weapp提供的组件

我们在app.json全局配置文件中,引入相关组件。然后在页面中使用查看一下效果。

  1. 引入组件(app.json)
"usingComponents":{"van-button": "@vant/weapp/button/index"
}
  1. 使用并查看效果
    在home.wxml中使用名为 “van-button” 的组件
<van-button type="primary">ok</van-button>

在这里插入图片描述


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

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

相关文章

极智开发 | ubuntu交叉编译aarch64 boost

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多经验分享 大家好&#xff0c;我是极智视界&#xff0c;本文介绍一下 ubuntu交叉编译aarch64 boost。 邀您加入我的知识星球「极智视界」&#xff0c;星球内有超多好玩的项目实战源码和资源下载&#xff0c;链接&#xf…

opencv -10 基础运算之 图像加权和(图像融合图像修复视频合成)

什么是图像加权和&#xff1f; 所谓图像加权和&#xff0c;就是在计算两幅图像的像素值之和时&#xff0c;将每幅图像的权重考虑进来&#xff0c;可以用公式表示为&#xff1a; dst saturate(src1 &#x1d6fc; src2 &#x1d6fd; &#x1d6fe;)式中&#xff0c;satu…

C# Linq 详解二

目录 概述 七、OrderBy 八、OrderByDescending 九、Skip 十、Take 十一、Any 十二、All C# Linq 详解一 1.Where 2.Select 3.GroupBy 4.First / FirstOrDefault 5.Last / LastOrDefault C# Linq 详解二 1.OrderBy 2.OrderByDescending 3.Skip 4.Take 5.Any 6.All C#…

arm day2

汇编实现1到100的累加 .text .global _start_start:mov r0,#0loop:add r0,#1add r1,r0cmp r0,#100blne loopstop:b stop结果为0x13ba等于5050

python的魔法函数

一、介绍 在Python中&#xff0c;魔法函数是以双下划线__开头和结尾的特殊函数。它们在类定义中用于实现特定的行为&#xff0c;例如运算符重载、属性访问、迭代等。 以下是一些常见的Python魔法函数&#xff1a; __init__: 这是一个特殊的构造函数&#xff0c;在创建类的实例…

Web_php_include

代码审计 进入环境&#xff0c;根据题目的提示&#xff0c;本题考察文件包含漏洞 <?php show_source(__FILE__); echo $_GET[hello]; $page$_GET[page]; while (strstr($page, "php://")) {$pagestr_replace("php://", "", $page); } incl…

解决Ruoyi单体版本集成Echarts多图表时在Tab模式下不展示问题

目录 背景 一、Tab拆分后无法展示 1、环境简介 2、原始报表功能说明 3、tab切分遇到的问题 二、问题分析及解决 1、问题分析 2、问题解决 3、初始化时图表渲染 4、Tab切换时重渲 总结 背景 最近在使用ruoyi的单体化版本进行Echarts多图表展示时遇到一个问题&#xff0c;r…

苍穹外卖day03——菜品管理业务代码开发

目录 公共字段自动填充——问题分析和实现思路 公共字段自动填充——代码实现(1) 公共字段自动填充——代码实现完善(2) 新增菜品——需求分析与设计 产品原型 ​编辑 接口设计 ​编辑 数据库设计 新增菜品——代码开发1(文件上传接口) 配置文件 Controller层代码 前后…

Net HTTP 概述

Net HTTP 概述 状态码字段Get/Post HTTP (HyperText Transfer Protocol) : 超文本传输协议 超文本 : 比文本更丰富传输 : 双方通信协议 : 双方的约定 状态码 200 : OK , 一切成功302 : 临时重定向 , 访问另一个 URL404 : 服务器不存在该 URL502 : 网关 , 代理错误503 : 当前…

Java经典面试解析:服务器卡顿、CPU飙升、接口负载剧增

01 线上服务器CPU飙升&#xff0c;如何定位到Java代码 解决这个问题的关键是要找到Java代码的位置。下面分享一下排查思路&#xff0c;以CentOS为例&#xff0c;总结为4步。 第1步&#xff0c;使用top命令找到占用CPU高的进程。 第2步&#xff0c;使用ps –mp命令找到进程下…

el-table合并单元格

1. 代码 <template><div><el-table border :span-method"arraySpanMethod" :data"tableData" style"width: 100%"><el-table-column prop"date" label"日期" width"180"></el-table-…

无线电音频-BPA600蓝牙协议分析仪名词解析

1 介绍 2 Baseband基带分析 (1)Delta 是什么含义? "Delta" 有多个含义,取决于上下文。以下是常见的几种含义: 希腊字母:Delta&#x

Linux(centos7)下安装mariadb10详解

MariaDB 和 MySQL 之间存在紧密的关系。 起源&#xff1a;MariaDB 最初是作为 MySQL 的一个分支而创建的。它的初始目标是保持与 MySQL 的兼容性&#xff0c;并提供额外的功能和性能改进。 共同的代码基础&#xff1a;MariaDB 使用了 MySQL 的代码基础&#xff0c;并在此基础上…

Docker 常用命令

docker命令大全 命令说明docker attach将本地标准输入、输出和错误流附加到正在运行的容器docker build从 Dockerfile 构建镜像docker builder管理构建docker checkpoint管理检查点docker commit从容器的更改中创建新图像docker config管理 Docker 配置docker container管理容器…

HTML <menuitem> 标签

实例 包含不同 <menuitem> 元素的上下文菜单: <menu type="context" id="mymenu"><menuitem label="Refresh" οnclick="window.location.reload();" icon="ico_reload.png"></menuitem><men…

【机器学习】特征工程 - 文本特征提取TfidfVectorizer

「作者主页」:士别三日wyx 「作者简介」:CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」:对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 文本特征提取 一、特征提取API二、提取特征三、转成数组四、特征名字五、转回原始数…

如何清除视频和照片中水印的几种方式

文章目录 如何清除视频和照片中水印的几种方式一、清除视频中水印的几种方式1、截除水印区域2、模糊水印区域3、使用人工智能技术工具3.1 通过【iMyFone-MarkGo[^1]】消除水印3.2 通过【嗨格式视频转换器[^2]】消除水印3.3 通过【PR 视频编辑器】消除水印3.4 通过 【美图秀秀】…

TensorFlow和PyTorch各有哪些优缺点呢?入门学习该如何选择呢?

TensorFlow和PyTorch是两个广泛应用于深度学习的开源框架&#xff0c;它们各自具有一些优点和缺点。下面是它们的主要特点&#xff1a; TensorFlow的优点&#xff1a; 高度灵活&#xff1a;TensorFlow提供了更底层的操作和控制&#xff0c;可以对模型的细节进行更精确的调整和…

微服务系列文章之 Nginx负载均衡

1、七层负载均衡 1、说明 Nginx要实现七层负载均衡需要用到proxy_pass代理模块配置。Nginx默认安装支持这个模块&#xff0c;我们不需要再做任何处理。Nginx的负载均衡是在Nginx的反向代理基础上把用户的请求根据指定的算法分发到一组【upstream虚拟服务池】。 2、要用到的指…

【Linux】网络基础之UDP协议

目录 &#x1f308;前言&#x1f338;1、传输层&#x1f33a;2、重谈端口号&#x1f368;2.1、端口号范围划分&#x1f367;2.2、认识知名端口号 &#x1f340;3、UDP协议&#x1f368;3.1、UDP协议报文结构&#x1f369;3.2、UDP协议的特点&#x1f36a;3.3、基于UDP的应用层协…