小程序使用vant组件库的配置及导入

已于 2022-05-13 01:43:58 修改
阅读量455 收藏
点赞数 1
分类专栏： 小程序开发 文章标签： 小程序 组件化
于 2021-04-28 19:52:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44852649/article/details/116241793
版权
本文档详细介绍了如何在微信小程序中引入 vant/weapp 组件库。首先，确保安装了Node.js并配置好环境变量。接着，在miniprogram文件夹内通过cmd初始化项目，使用npm安装 vant/weapp 库。对于新版本，可以跳过使用nmp模块的步骤直接构建。最后，调整配置去除'v2'风格，即可完成 vant组件库的集成。
摘要由CSDN通过智能技术生成

vant组件库导入

注意，需要有node环境，node下载: https://nodejs.org/zh-cn/
写入环境变量等配置后需要重启才能生效。（方法网上有很多）

1、进入miniprogram文件夹，在终端打开：在标题地址栏中输入cmd 进入命令提示符界面，输入下面命令初始化

npm init -y

2、复制文档代码，运行

npm i @vant/weapp -S --production

3、使用nmp模快**(新版本没有此选项，可以直接忽略)**4、构建nmp

5、去掉"style": "v2"

LayHill
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序引入vant
木木的博客
06-03 1596
第一步新建小程序工程 第二步初始化 cmd方式进入小程序目录 输入npm init 回车 第三步安装vant，按照官网说的 npm i @vant/weapp -S --production 第四步：设置工程 第五步：在工程中使用vant 在app.wxss中引入样式 @import 'miniprogram_npm/@vant/weapp/common/index.wxss'; page { font-family: -apple-system, BlinkMacSystemFont, 'H
微信小程序引入VANT组件的方法步骤
12-13
1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化，然后一直回车默认就Ok。 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理。 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具，选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块。 6.选择要在哪个pages里使用该组件 这里以pages下的movie举例，写一个简单的按钮。 如图 在对应的json文件中
小程序vant引入教程
gztrljh
02-11 137
https://blog.csdn.net/weixin_40267830/article/details/105437037 https://blog.csdn.net/weixin_46041654/article/details/107864749 https://blog.csdn.net/superKM/article/details/89520255
【Vue】vant组件库及Vue周边的其他组件库
最新发布
qq_39921135的博客
06-11 205
组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。比如日历组件、键盘组件、打分组件、下拉筛选组件等。(滴滴)，但是后面两个更新效率没有vant高。vant3，4对应的是vue3。vant2对应的是vue2。常用的就是以下两个版本。
微信小程序npm构建+vant导入使用
fdcsdn_的博客
08-24 286
小程序中构建npm 首先先检查是否安装了npm 没有安装npm需要安装npm npm -v 注意点：当node环境配置在了c盘的情况下 会导致在使用npm下载插件时打不开c盘文件夹 导致安装失败的情况 小程序开发者工具需要管理员权限运行 也可以重新配置一次nodejs环境到其他盘（我懒 我就管理员运行了） 初始化项目 npm init -y -y 表示项目选项全部默认 此时不会出现 miniprogram_npm 文件夹 这一步只是为了package相关的文件 下载相关依赖 例：van
vant ui 文档_5个最热门的微信小程序 UI 组件库
weixin_39883208的博客
01-30 562
选择一款好用的UI组件库，可以达到事半功倍的效果。WeUI star 24.9kWeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。GitHub 地址：https://github.com/Tencent/weui效果：https://weui.io开发文档参考：https://github.com/Tence...
参照Vant-Weapp开发的抖音原生小程序UI组件库.zip
02-25
Vant-Weapp是一个轻量级的小程序组件库，它在微信小程序中广泛使用，以其简洁、高效和高度可定制的特点深受开发者喜爱。这个特定的组件库应该是对Vant-Weapp的移植和优化，以适应抖音小程序的特性和需求。 【描述】...
详解如何在微信小程序开发中正确的使用vant ui组件
10-18
使用UI组件库可以提升开发效率和提升界面的美观程度，Vant Weapp是Vant UI组件库针对微信小程序开发推出的一套组件。 首先，Vant UI组件库是一个流行的Vue组件库，它提供了丰富的组件，如按钮、输入框、导航栏等，...
微信小程序vant组件库本地版本，可以直接引用使用
06-13
1. **安装**：本地版本的 vant 需要将 `lib` 文件夹导入到微信小程序项目中，并在配置文件（app.json 或其他页面的 json 文件）中引入 vant 的样式文件。 2. **注册组件**：在小程序的入口文件（app.js 或各页面的 ...
详解如何搭建mpvue框架搭配vant组件库的小程序项目
10-16
在本文中，我们将深入探讨如何搭建一个基于mpvue框架并结合vant组件库的小程序项目。首先，让我们了解 vant 组件库。Vant是由有赞公司开发的轻量级、可靠的移动端Vue小程序组件库，它提供了丰富的高质量组件，帮助...
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
Vant Weapp 是一个专门为微信小程序设计的组件库，具有丰富的UI组件和良好的性能。在Mpvue框架中使用Vant Weapp，可以提升小程序的界面设计和用户体验。以下是在Mpvue项目中集成Vant Weapp的详细步骤： ### 一、...
Vant在微信小程序中的使用
实事求是，艰苦奋斗，小小的梦想，终将实现。
01-08 2507
1、创建微信小程序项目 2、在打开小程序根目录文件夹 3、在根目录文件夹中打开终端 输入npm init然后一直回车。 4、安装Vant-weapp 输入npm i @vant/weapp -S --production 5、使用微信开发者工具进行构建 6、在微信小程序中使用Vant 完成构建后，你可以看到你的小程序目录中多了一个文件夹 这个文件夹就是Vant的组件库。你只需要在你需要使用Vant的页面中进行组件的注册即可使用了。如图 ...
vue基础6--vant组件库的基本使用
咖啡壶的博客
12-18 1913
vant组件库的基本使用
基于vue2.x搭建组件库的流程-（二）-新组件文件的初始化
weixin_42349568的博客
10-08 327
上篇文章已经讲解了从零开始搭建一个组件库到发布npm，，然后第三方开发者下载使用的基本流程。这篇文章主要优化下组件库的开发之一：组件的自动初始化。在开发一个组件之前，需要创建组件目录、创建组件文件、初始化组件模板等一系列繁琐又重复的工作，这些其实都可以使用脚本自动化实现。
微信小程序vant 按需引入
lgldl的博客
10-30 1197
写了一段脚本解决了vant不能按需加载的问题，运行脚本作用是miniprogram_npm中未使用到的vant组件
微信小程序使用vant组件及注意事项！
weixin_47588909的博客
03-18 607
小程序使用vant
关于微信小程序如何使用Vant组件
香梨炒虾米的博客
03-31 5026
微信小程序如何使用Vant组件前言一、微信小程序自动查找第二种 前言 今天闲着没事，兴趣来了，想写写微信小程序，用原生的敲，因为懒得原因，不想再去封装一些组件库，就想当Vant，引用Vant真的是一波三折，不用不知道，一用才知道，好了，废话说的差不多了 一、微信小程序自动查找 Vant官网说的其实也挺清楚的， 第一步：npm i @vant/weapp -S --production 第二步：将 app.json 中的 “style”: “v2” 去除， 第三步：修改 project.config.js
小程序--引入vant组件库
sinat_34896766的博客
02-21 1128
小程序中凡是通过 npm 下载的模块，都必须经过构建才能使用，构建后的内容会存放在。在微信开发者工具中打开终端，输入npm init，对npm进行初始化。修改project.config.json中的。，否则 Vant 组件的样式会受到影响。
Vant移动端组件库入门及使用方法
Nekoneee的博客
01-03 3406
Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本通过本章节你可以了解到 Vant 的安装方法和基本使用姿势。
uni-app小程序使用vant组件
09-13
1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LayHill

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值