小程序--引入vant组件库

一、npm初始化

        在微信开发者工具中打开终端,输入npm init,对npm进行初始化 

二、安装vant组件库

npm install @vant/weapp

 

三、修改app.json

        修改 app.json,移除全局配置 "style": "v2",否则 Vant 组件的样式会受到影响。

四、修改project.config.json

        修改project.config.json中的setting配置选项的 packNpmManually 和 packNpmRelationList

 

五、构建 npm

        小程序中凡是通过 npm 下载的模块,都必须经过构建才能使用,构建后的内容会存放在 miniprogram_npm 中 。

 

 六、使用vant

{"usingComponents": {"van-button": "@vant/weapp/button/index"},"navigationStyle": "custom"
}
<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://xiahunao.cn/news/2799340.html

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

相关文章

记一次 .NET某列控连锁系统 崩溃分析

一&#xff1a;背景 1. 讲故事 过年喝了不少酒&#xff0c;脑子不灵光了&#xff0c;停了将近一个月没写博客&#xff0c;今天就当新年开工写一篇吧。 去年年初有位朋友找到我&#xff0c;说他们的系统会偶发性崩溃&#xff0c;在网上也发了不少帖子求助&#xff0c;没找到自…

Android 浅色皮肤阴影开发

前言&#xff1a;项目中要进行浅色皮肤开发&#xff0c;然后要求要有阴影效果&#xff0c;下面是UI觉得可行的中立方案效果 尝试一、使用elevation添加阴影发现效果一般 尝试二、使用带阴影的UI切图后续发现成本太大&#xff0c;对后续多个皮肤适配要求太大 尝试三、使用elevat…

Adobe将类ChatGPT集成到PDF中

2月21日&#xff0c;全球多媒体巨头Adobe在官网宣布&#xff0c;推出生成式AI助手AI Assistant&#xff0c;并将其集成在Reader 和Acrobat 两款PDF阅读器中。 据悉&#xff0c;AI Assistant的功能与ChatGPT相似&#xff0c;可以基于PDF文档提供摘要、核心见解、基于文档内容&a…

CSS 函数详解url、min、rgb、blur、scale、rotate、translate等

随着技术的不断进步&#xff0c;CSS 已经从简单的样式表发展成为拥有众多内置函数的强大工具。这些函数不仅增强了开发者的设计能力&#xff0c;还使得样式应用更加动态、灵活和响应式。本文将深入探讨 CSS 常见的 66 个函数&#xff0c;逐一剖析它们的功能和用法&#xff0c;一…

乡镇街道档案包括哪些内容

乡镇街道档案是指记录乡镇街道行政区域内的各种信息、数据和文献资料的档案。乡镇街道档案通常包括以下内容&#xff1a; 1. 行政管理档案&#xff1a;包括乡镇街道的组织机构、人员编制、管理制度等方面的档案资料。 2. 经济发展档案&#xff1a;记录乡镇街道的经济发展情况&a…

一个简单的mysql绕过

一、环境代码 上一个环境的demo文件 二、ctf技巧 代码先进入&#xff0c;到chr转换为英文&#xff0c;之后连接到hehe后面&#xff0c;假设我连接了一个&#xff0c;接下来就回去demo中查找hehe&#xff0c;如果name是hehe就输出&#xff0c;意思就是只认前面的hehe后面的会被…

Nginx----高性能的WEB服务端

一、Nginx介绍 1、什么是Nginx Nginx Nginx是一个高性能的HTTP和反向代理服务器。是一款轻量级的高性能的web服务器/反向代理服务器/电子邮件&#xff08;IMAP/POP3&#xff09;代理服务器&#xff0c;单台物理服务器可支持30 000&#xff5e;50 000个并发请求。 一款高性能…

B/S架构,java源码,医院绩效管理系统,覆盖了医院绩效管理工作“PDCA”循环的全过程,支持二次开发

医院绩效管理系统源码 医院绩效管理系统以国家医院绩效管理考核政策法规为依据&#xff0c;结合医院管理实践&#xff0c;以经济管理指标为核心&#xff0c;医疗质量、安全、效率、效益管理为重点&#xff0c;特别强调持续改进&#xff08;PDCA&#xff09;管理理念。实现医院绩…

【关于python变量类型学习笔记】

python的变量类型 在创建变量时会在内存中开辟一个空间&#xff0c;变量是存储在内存中的值。 根据变量的数据类型&#xff0c;解释器会分配指定内存&#xff0c;并决定什么数据可以被存储在内存中。 变量可以指定不同的数据类型&#xff0c;这些变量可以存储整数&#xff0c;…

怎么制作图文笔记 电脑图文笔记制作方法

在知识的海洋中遨游时&#xff0c;我时常感到需要一个得力的助手来帮我捕捉那些闪过的灵感和重要的信息。试过各种笔记方法后&#xff0c;我发现了笔记软件的魅力&#xff1a;它们不仅便捷&#xff0c;还能让笔记更加丰富多彩。 想象一下&#xff0c;你正在阅读一篇关于历史文…

js设计模式:建造者模式

作用: 将众多功能独立封装,然后用一个大类将其全部收纳,形成一个完整的功能 这个是很常见的设计模式 示例: function render(h){}function h(){}function $mount(dom){console.log(dom,绑定的根节点)console.log(this,this是vue实例)}function use(plugin){}function $attr(…

SQL-FEFT JOIN (拼接表)

语法 SELECT column_name(s) FROM table1 LEFT JOIN table2 ON table1.column_nametable2.column_name; 按照一定规则&#xff0c;将表table1和表table2拼接起来。 例&#xff1a; Employees 表&#xff1a; ------------------------ | Column Name | Type | ------…

合纵连横 – 以 Flink 和 Amazon MSK 构建 Amazon DocumentDB 之间的实时数据同步

在大数据时代&#xff0c;实时数据同步已经有很多地方应用&#xff0c;包括从在线数据库构建实时数据仓库&#xff0c;跨区域数据复制。行业落地场景众多&#xff0c;例如&#xff0c;电商 GMV 数据实时统计&#xff0c;用户行为分析&#xff0c;广告投放效果实时追踪&#xff…

qt-有趣的小球游戏大球吃小球

qt-有趣的小球游戏大球吃小球 一、演示效果二、核心程序三、下载链接 一、演示效果 二、核心程序 #include "mainwindow.h" #include "ui_mainwindow.h" #include "organism.h" #include "badorganism.h" #include <QPainter> …

C++ Primer 笔记(总结,摘要,概括)——第4章 表达式

目录 4.1 基础 4.1.1 基本概念 4.1.2 优先级与结合律 4.1.3 求值顺序 4.2 算术运算符 4.3 逻辑和关系运算符 4.4 赋值运算符 4.5 递增和递减运算符 4.6 成员访问运算符 4.7 条件运算符 4.8 位运算符 4.9 sizeof运算符 4.10 逗号运算符 4.11 类型转换 4.11.1 算数转换…

宝塔面板-安装与卸载

宝塔面板&#xff08;BT Panel&#xff09;是一款在互联网上广泛使用的服务器管理软件&#xff0c;它以其简洁的界面和强大的功能受到了许多站长的喜爱。通过宝塔面板&#xff0c;用户可以轻松地管理服务器上的网站、数据库、FTP、邮箱等服务。本文将详细介绍宝塔面板的安装与卸…

flink cdc原理与使用

flink cdc原理与使用 1 cdc 介绍1.1 cdc简介与对比1.2 基于日志的 CDC 方案介绍 2 基于 Flink SQL CDC 的数据同步方案实践2.1 案例 1 : Flink SQL CDC JDBC Connector2.2 案例 2 : CDC Streaming ETL2.3 案例 3 : Streaming Changes to Kafka 3 Flink SQL CDC 的更多应用场景…

OpenCvSharp随机数与绘制文本用法

目的 RNG函数使用 PutText函数使用 GetTextSize函数使用 RNG随机数生成 生成伪随机数。注意&#xff0c;当初始的state一样时&#xff0c;每次生成的随机数序列是一样的。 PutText绘制文本 函数说明&#xff1a;将文本绘制到图像上(不支持中文)。无绘制的文本用问号代替。 …

[PDF编辑精选] 适用于 Windows 10/11 的PDF 编辑器列表

PDF 是 Portable Document Format 的缩写&#xff0c;是 Adob​​e 创建的一种文件格式&#xff0c;用于在保留格式的情况下轻松查看和共享——无论查看文档的任何人使用的软件或操作系统如何。然而&#xff0c;与PDF文档相关的一个主要问题出现了&#xff0c;那就是编辑文档内…

SpringSecurity安全框架

我们使用这个springSecurity安全框架,作用是认证,授权,将用户的权限和对应的资源进行绑定,默认的是在内存中保存的,实际开发中,是需要根据项目业务的需求对某些方法进行重写,使数据库中权限对应的资源进行绑定,就是查看当前登录的用户所扮演的角色,该角色有哪些权限 授权 1内…