当前位置： 首页 > article >正文

uniapp微信小程序引入vant组件库

article 2026/2/3 23:28:51

1、首先要有uniapp项目，根据vant官方文档使用yarn或npm安装依赖：

1、 yarn init 或 npm init2、 # 通过 npm 安装npm i @vant/weapp -S --production# 通过 yarn 安装yarn add @vant/weapp --production# 安装 0.x 版本npm i vant-weapp -S --production

安装完依赖如下：

2、在uniapp项目根目录下(也可以指定目录)本案例在根目录下新建：wxcomponents文件夹

必须是wxcomponents文件夹！
（原因：和微信开发者工具内部编译文件名一致）
3、将node_modules/@vant/weapp/下的dist文件夹复制粘贴到wxcomponents文件夹下（wxcomponents/dist）或者（wxcomponents/vant/dist）等等确保文件正确

 

 4、配置样式在App.vue文件中：

<style lang="scss">/*每个页面公共css */
/* #ifdef MP-WEIXIN */@import "/wxcomponents/dist/common/index.wxss"; //路径要确保正确！！！！
/* #endif */	
</style>

 

 5、配置按需引入vant组件模块在pages.json文件夹中： 

"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents": {"van-button": "/wxcomponents/dist/button/index","van-circle": "/wxcomponents/dist/circle/index"}},

 6、使用引入的模块： 

运行结果：

 

代码：

<template><view class="content"><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><view style="margin-top: 30rpx;"><van-circle :value="value" :color="gradientColor" text="渐变色" /></view></view>
</template><script>export default {data() {return {value: 0, //进度gradientColor: { //渐变色'0%': '#ffd01e','50%': '#aa55ff','100%': '#ee0a24',},item: null,}},onUnload() {clearInterval(this.item)this.item = null},onLoad() {this.item = setInterval(() => {if (this.value >= 100) {this.value = 0return} else {this.value += 10}}, 1000)},methods: {}}
</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}
</style>

 本文为转载文章，仅供本人记录日常问题

原文链接：uniapp微信小程序引入vant组件库_uniapp怎么配置vant的按需导入-CSDN博客

相关文章：

uniapp微信小程序引入vant组件库

1、首先要有uniapp项目&#xff0c;根据vant官方文档使用yarn或npm安装依赖&#xff1a; 1、 yarn init 或 npm init2、 # 通过 npm 安装npm i vant/weapp -S --production# 通过 yarn 安装yarn add vant/weapp --production# 安装 0.x 版本npm i vant-weapp -S --production …...

编程日记 2026/1/26 6:41:31

贪心进阶学习笔记

反悔贪心 贪心是指直接选择局部最优解&#xff0c;不需要考虑之后的影响。 而反悔贪心是在贪心上面加了一个“反悔”的操作&#xff0c;于是又可以撤销之前的“鲁莽行动”&#xff0c;让整个的选择稍微变得“理智一些”。 于是&#xff0c;我个人理解&#xff0c;反悔贪心是…...

编程日记 2026/1/26 9:41:35

Java 大视界 -- Java 大数据在航天遥测数据分析中的技术突破与应用（177）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2026/1/26 5:09:32

架构师面试（二十七）：单链表

问题 今天的问题对于架构师来说会相对容易许多。今天出一个【数据结构与算法】相关的题目&#xff0c;醒醒脑。 给一张【单链表】&#xff0c;该单链表有100个节点元素&#xff08;当然&#xff0c;事先我们是不知道100这个数目的&#xff09;&#xff0c;要获取倒数第8个元素…...

编程日记 2026/1/26 9:14:08

从扩展黎曼泽塔函数构造物质和时空的结构-15

回来考虑泽塔函数&#xff0c; 我们知道&#xff0c; 也就是在平面直角坐标系上反正切函数在x上的变化率&#xff0c;那么不难看出&#xff0c; 就是在s维空间上的“广义”反正切函数在单位p上的变化率&#xff0c;而泽塔函数&#xff0c;就是这些变化率的全乘积&#xff0c; 因…...

编程日记 2026/2/1 8:00:15

数据库访问工具 dbVisitor v6.0.0 发布

dbVisitor 是一款轻量小巧、功能完备的 Java 数据库 ORM 工具&#xff0c;它的前身是 HasorDB&#xff0c;历经 8 年迭代后正式更名为 dbVisitor 并开始独立发展4。以下是关于 dbVisitor v6.0.0 发布的相关信息&#xff1a; 发布说明 在 Maven Central 上可查询到 dbVisitor …...

编程日记 2026/1/30 23:49:49

01背包问题详解 具体样例模拟版

01背包 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 v i v_i vi​&#xff0c;价值是 w i w_i wi​。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 …...

编程日记 2026/1/29 22:23:20

网络初识 - Java

网络发展史&#xff1a; 单机时代&#xff08;独立模式&#xff09; -> 局域网时代 -> 广域网时代 -> 移动互联网时代 网络互联&#xff1a;将多台计算机链接再一起&#xff0c;完成数据共享。 数据共享的本质是网络数据传输&#xff0c;即计算机之间通过网络来传输数…...

编程日记 2026/1/30 3:21:56

zk基础—5.Curator的使用与剖析一

大纲 1.基于Curator进行基本的zk数据操作 2.基于Curator实现集群元数据管理 3.基于Curator实现HA主备自动切换 4.基于Curator实现Leader选举 5.基于Curator实现分布式Barrier 6.基于Curator实现分布式计数器 7.基于Curator实现zk的节点和子节点监听机制 8.基于Curator创…...

编程日记 2025/12/25 12:11:39

大模型快速 ASGI 服务器uvicorn

基础概念类 1. 什么是 Uvicorn&#xff0c;它的作用是什么&#xff1f; 答案&#xff1a;Uvicorn 是一个基于 Python 的快速 ASGI&#xff08;异步服务器网关接口&#xff09;服务器。它的主要作用是作为 Web 应用程序的服务器&#xff0c;负责接收客户端的请求&#xff0c;并…...

编程日记 2025/12/3 14:54:18

每日一题（小白）回溯篇4

深度优先搜索题&#xff1a;找到最长的路径&#xff0c;计算这样的路径有多少条&#xff08;使用回溯&#xff09; 分析题意可以得知&#xff0c;每次向前后左右走一步&#xff0c;直至走完16步就算一条走通路径。要求条件是不能超出4*4的范围&#xff0c;不能重复之前的路径。…...

编程日记 2026/1/27 4:42:46

消息队列基础概念及选型，常见解决方案包括消息可靠性、消息有序、消息堆积、重复消费、事务消息

前言 是时候总结下消息队列相关知识点啦&#xff01;我搓搓搓搓 本文包括消息队列基础概念介绍&#xff0c;常见解决方案包括消息可靠性、消息有序、消息堆积、重复消费、事务消息 参考资料&#xff1a; Kafka常见问题总结 | JavaGuide RocketMQ常见问题总结 | JavaGuide …...

编程日记 2026/1/8 8:15:53

基于STM32与应变片的协作机械臂力反馈控制系统设计与实现---3.3 机械结构改装

3.3 机械臂结构改装设计与实施 一、改装需求分析 1.1 改装类型分级 改装级别涉及范围典型改动周期成本I级（小型）末端执行器工具快换装置1-3天$500-2000II级（中型）关节模块电机/减速器升级1-2周$2000-8000III级（大型）本体结构材质/拓扑优化1-3月$8000+1.2 关键参数变更评…...

编程日记 2025/12/12 8:12:13

k8s进阶之路：本地集群环境搭建

概述 文章将带领大家搭建一个 master 节点&#xff0c;两个 node 节点的 k8s 集群&#xff0c;容器基于 docker&#xff0c;k8s 版本 v1.32。 一、系统安装 安装之前请大家使用虚拟机将 ubuntu24.04 系统安装完毕&#xff0c;我是基于 mac m1 的系统进行安装的&#xff0c;所…...

编程日记 2026/1/28 5:29:32

云服务器实战：用 Nginx 搭建高性能 API 网关与反向代理服务（附完整配置流程）

在如今的 Web 系统架构中&#xff0c;“接口统一出口”已成为必备设计模式——无论是前后端分离、微服务架构&#xff0c;还是多端接入&#xff08;Web、小程序、App&#xff09;&#xff0c;一个稳定、高性能、可扩展的 API 网关至关重要。 而 Nginx&#xff0c;作为轻量级高…...

编程日记 2025/7/20 19:36:03

C++ STL 详解 ——list 的深度解析与实践指南

在 C 的标准模板库&#xff08;STL&#xff09;中&#xff0c;list作为一种重要的序列式容器&#xff0c;以其独特的双向链表结构和丰富的操作功能&#xff0c;在许多编程场景下发挥着关键作用。深入理解list的特性与使用方法&#xff0c;能帮助开发者编写出更高效、灵活的代码…...

编程日记 2026/1/29 1:56:35

按键切换LCD显示后，显示总在第二阶段，而不在第一阶段的问题

这是一个密码锁的程序&#xff0c;当在输入密码后&#xff0c;原本是要重置密码&#xff0c;但是程序总是在输入密码正确后总是跳转置设置第二个密码&#xff0c;而第一个密码总是跳过。 不断修改后&#xff0c; 解决方法 将if语句换成switch语句&#xff0c;这样就可以分离程序…...

编程日记 2026/1/28 3:21:59

护网蓝初面试题

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…...

编程日记 2026/1/29 5:46:23

C++11: 智能指针

C11: 智能指针 &#xff08;一&#xff09;智能指针原理1.RAll2.智能指针 (二)C11 智能指针1. auto_ptr2. unique_ptr3. shared_ptr4. weak_ptr &#xff08;三&#xff09;shared_ptr中存在的问题std::shared_ptr的循环引用 &#xff08;四&#xff09;删除器&#xff08;五&a…...

编程日记 2026/1/31 6:57:09

去中心化预测市场

去中心化预测市场 核心概念 预测市场类型&#xff1a; 类别型市场&#xff1a;二元结果&#xff08;YES/NO&#xff09;&#xff0c;例如“BTC在2024年突破10万美元&#xff1f;” 多选型市场&#xff1a;多个选项&#xff08;如总统候选人&#xff09;&#xff0c;赔付基于…...

编程日记 2025/6/8 3:59:02

从零实现本地大模型RAG部署

1. RAG概念 RAG&#xff08;Retrieval-Augmented Generation&#xff09;即检索增强生成&#xff0c;是一种结合信息检索与大型语言模型&#xff08;大模型&#xff09;的技术。从外部知识库&#xff08;如文档、数据库或网页&#xff09;中实时检索相关信息&#xff0c;并将其…...

编程日记 2026/1/29 11:45:41

使用 Python 连接 PostgreSQL 数据库，从 `mimic - III` 数据库中筛选数据并导出特定的数据图表

要使用 Python 连接 PostgreSQL 数据库&#xff0c;从 mimic - III 数据库中筛选数据并导出特定的数据图表&#xff0c;你可以按照以下步骤操作&#xff1a; 安装所需的库&#xff1a;psycopg2 用于连接 PostgreSQL 数据库&#xff0c;pandas 用于数据处理&#xff0c;matplot…...

编程日记 2025/8/12 19:05:35

【Linux系统篇】：探索文件系统原理--硬件磁盘、文件系统与链接的“三体宇宙”

✨感谢您阅读本篇文章&#xff0c;文章内容是个人学习笔记的整理&#xff0c;如果哪里有误的话还请您指正噢✨ ✨ 个人主页&#xff1a;余辉zmh–CSDN博客 ✨ 文章所属专栏&#xff1a;Linux篇–CSDN博客 文章目录 一.认识硬件--磁盘物理存储结构1.存储介质类型2.物理存储单元3…...

编程日记 2026/1/31 12:19:42

Tracing the thoughts of a large language model 简单理解

Tracing the thoughts of a large language model 这篇论文通过电路追踪方法（Circuit Tracing）揭示了大型语言模型Claude 3.5 Haiku的内部机制，其核心原理可归纳为以下几个方面： 1. 方法论核心：归因图与替换模型 替换模型（Replacement Model） 使用跨层转码器（CLT）将原…...

编程日记 2026/1/30 4:21:27

OpenCV边缘检测技术详解：原理、实现与应用

概述 边缘检测是计算机视觉和图像处理中最基本也是最重要的技术之一&#xff0c;它通过检测图像中亮度或颜色急剧变化的区域来识别物体的边界。边缘通常对应着场景中物体的物理边界、表面方向的变化或深度不连续处。 分类 OpenCV提供了多种边缘检测算法&#xff0c;下面我们介…...

编程日记 2026/1/29 7:10:13

Java学习——day22(Java反射基础入门)

文章目录 1.反射的定义2. 认识反射的关键API2.1 Class2.2 Field2.3 Method2.4 Constructor 3. 示例代码讲解与分析4. 编写反射示例代码的步骤4.1 定义测试类4.2 编写主程序&#xff0c;使用反射获取信息4.3 通过反射创建对象并调用方法 5. 总结6.今日生词 Java反射笔记 1.反射的…...

编程日记 2026/1/26 14:15:13

BN 层做预测的时候, 方差均值怎么算

✅ 一、Batch Normalization&#xff08;BN&#xff09;回顾 BN 层在训练和推理阶段的行为是不一样的&#xff0c;核心区别就在于&#xff1a; 训练时用 mini-batch 里的均值方差&#xff0c;预测时用全局的“滑动平均”均值方差。 &#x1f9ea; 二、训练阶段&#xff08;Trai…...

编程日记 2026/2/1 17:24:27

JS 其他事件类型

页面加载 事件 window.addEvent() window.addEventListener(load,function(){const btn document.querySelector(button)btn.addEventListener(click,function(){alert(按钮)})})也可以给其他标签加该事件 HTML加载事件 找html标签 也可以给页面直接赋值...

编程日记 2026/2/3 22:39:04

AI Agent设计模式五：Orchestrator

概念 &#xff1a;中央任务调度中枢 ✅ 优点&#xff1a;全局资源协调&#xff0c;确保任务执行顺序❌ 缺点&#xff1a;单点故障风险&#xff0c;可能成为性能瓶颈 import operator import osfrom langchain.schema import SystemMessage, HumanMessage from langchain_opena…...

编程日记 2026/1/31 8:51:05

在Hive中，将数据从一个表查询并插入到另一个表

1. 确认目标表结构 确保目标表已存在且结构与查询结果匹配。若不存在&#xff0c;需先创建&#xff1a; CREATE TABLE target_table ( id INT, name STRING ) PARTITIONED BY (dt STRING) STORED AS ORC; 2. 选择插入方式 覆盖插入&#xff08;替换现有数据&#xff0…...

编程日记 2026/1/24 1:56:15