【微信小程序】使用npm引入vant组件的详细步骤

最新推荐文章于 2024-05-25 11:52:00 发布
最新推荐文章于 2024-05-25 11:52:00 发布
阅读量1k 收藏 7
点赞数 1
分类专栏： 微信小程序 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44707049/article/details/118756935
版权

本地开发的引入方法

新建微信小程序

这里讲的是不使用云开发的引入方法，不过两者大同小异。
记住小程序的目录路径
在这里插入图片描述

看vant的开发文档

Vant Weapp 开发文档入口
文档里面的快速上手有讲到npm如何安装，但是直接按照上面的步骤一步一步来，是构建不了npm的。
在这里插入图片描述
我们从步骤二开始。

修改app.json

在这里插入图片描述

修改 project.config.json

在这里插入图片描述
这一步还有一点要注意，就是vant文档中特别提到的

最低0.47元/天 解锁文章
不大好不大好
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
vant的安装和引入
qq_52722039的博客
04-29 4738
Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。 通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。 目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。 如果你需要开发一个移动商城，用 Vant 就再合适不过了。 npm i vant -S ：这是简写形式。 npm install vant --save :这是完整写法。 如果你网络很慢的话，可以使用淘宝的源，但是不建议使用cnpm来进行安装。 安装好v
微信小程序npm引入vant-weapp的踩坑记录
10-16
主要给大家介绍了关于微信小程序npm引入vant-weapp的踩坑记录，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
【微信小程序】使用npm并引入vant-weapp组件库
RogerQianpeng的博客
12-06 617
vant文档与微信小程序文档写得弯弯绕绕，你引用我，我引用你，还给出了多种不同情况下的选项，甚至有步骤缺失，导致踩了一点小坑，浪费了一些没必要的时间，这里给出完整可行的实现方法，以供参考。首先，当然是先建一个微信小程序新建一个终端，执行，进行npm初始化，会生成一个package.json 此条在官方文档中未说明下载一下 此条官方文档给出了多条选择打开app.json，删除 此条官方文档在“注意”中说明了现在普遍使用的新版本配置方法屏幕最顶栏菜单，菜单-工具-构建npm 在app.json中引入具体组件，然
小程序中使用npm安装vant组件实现按需引入减少代码包大小，避免触发用户隐私协议
最新发布
cafehaus的博客
05-25 857
微信小程序按需引入 vant 组件，自动清除项目中未使用的 vant 组件，减少代码包大小，避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
小程序插件构建npm包之引入vant
qq_43583887的博客
01-06 357
框架报错的情况，有的可能是基础库的问题，有的可能换了基础库就好的。但是我构建成功后还是报了错，后面反复刷新了几次正常了。npm框架构建见尾部。类似于某个组件未找到，有可能是你引入的路径有问题，建议详细检查一下路径，我是框架没有搭建成功导致怎么改变路径都报错。4.微信开发者工具构建npm包，工具->构建npm，成功后有这两个包。导致这个原因是插件的npm框架没有搭建好，解决方案见底部。以上就是目前遇到的问题，后续还有组件相关的问题继续更新。1.新建终端，到你的插件目录下。5.引入vant组件。
小程序使用npm包引入vantUI组件库
weixin_43831302的博客
08-07 489
1.初始化小程序项目 在项目根目录下npm init 为了生成package.json 2.新建node_modules文件夹 3.在项目根目录下 npm i miniprogram-datepicker -S --production 4.node_modules目录下生成了2个文件夹。一个带版本号，一个不带。 在微信开发工具“构建npm”。 我们再检查下小程序的miniprogram_npm...
在小程序项目中使用npm安装Vant组件库
一只想躺平却不敢躺平的小菜鸟
11-19 865
小程序中使用npm
【微信小程序遇到的坑】 使用npm引入vant组件
热门推荐
superKM的博客
04-26 1万+
从小程序基础库版本2.2.1或以上、及开发者工具1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 直接创建小程序，从工具>构建npm，会弹出没有找到node_modules目录，因此以引入vant组件为例。 1，创建普通项目后在右上角详情中，打开使用npm模块。 2，鼠标放在目录上右键，打开终端，切换到根目录 3，直接使用np...
微信小程序引入VANT组件的方法步骤
10-16
这篇文章将详细介绍如何在微信小程序中引入VANT组件，以便利用其丰富的组件库来提升用户体验。 首先，我们需要设置项目环境。如果你还没有创建微信小程序项目，可以使用微信开发者工具来完成。一旦项目创建成功，...
微信小程序引入Vant组件库过程解析
11-30
微信小程序是一种轻量级的...通过以上步骤，你就可以在微信小程序中顺利地引入和使用 Vant Weapp 组件库，提升开发效率，创建出更加专业和美观的用户界面。记得在实践中不断探索和学习，以便更好地掌握这个强大的工具。
如何在微信小程序项目中使用vant组件库
10-21
本教程将详细介绍如何在微信小程序项目中集成并使用Vant组件库。 1. **安装Vant Weapp** 在你的项目根目录下，打开终端或命令行工具，确保已经全局安装了`npm`（Node.js包管理器）。如果没有，请先通过官方网站...
微信小程序使用npm包的方法步骤
12-11
这里以vant-weapp(小程序UI组件库)为例： npm i vant-weapp -S --production 三：npm包构建 1：点击微信开发者工具右上角详情——>本地设置，选中使用npm模块 2：点击微信开发者工具菜单栏的工具，选择构建npm 当...
如何在小程序中引入使用vant框架
huangzhixin1996的博客
07-01 9990
在微信小程序的原生组件较少的背景下，通常我们在开发微信小程序的时候则往往会使用该框架作为主体的UI框架进行开发，省时省力，大大缩短了开发的周期。由于小程序的环境和普通的Vue项目大不相同，所以想要在小程序中引入vant框架并不能直接用npm去直接构建，它稍微会更麻烦些，所以接下来的内容会详细介绍一下如何在微信小程序中引入使用Vant。关于这个文件的修改，主要是看我们用的小程序模板，不同模板生成的文件目录不一样，新版的一些模板目录可能会导致小程序找不到我们的npm包位置，所以需要对这个文件做一些调整。
微信小程序vant 按需引入
lgldl的博客
10-30 1187
写了一段脚本解决了vant不能按需加载的问题，运行脚本作用是miniprogram_npm中未使用到的vant组件
在Vue项目按需引入Vant组件
看海的鱼
01-15 3634
1.安装Vant # 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 2.安装babel 插件 按照官网上写的，安装babel 插件后，就能在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装插件 npm i babel-plugin-import -D 官网上说在.babelrc 中添加配置 { "p...
npm 安装 Vant Weapp UI 库（小程序开发）
it_lyy_的博客
05-03 372
一、安装npm 下载地址：https://nodejs.org/en/download/ npm -v 查看版本号 C:\Users\admin>npm -v 6.14.12 有这版本号，表示就已经安装成功了。 二、构建npm 进入小程序根目录（app.js所在目录）,打开cmd，执行： npm init -y 添加 vant-weapp 依赖 npm i vant-weapp -S --production 开发工具中勾一下使用npm依赖 构建npm 构建建完成后可以看到当前目录
vue vant 安装 使用详解
lwx931449660的博客
04-16 6744
Vant是轻量、可靠的移动端 Vue 组件库，安装使用可以参照官方文档进行，但是我发现文档不是很全面，所以自己在这里记录一下 vue使用Vant主要有四种方式，第四种通过CDN引入方式，这里不做介绍，主要是下面这三种： ###在使用之前，首先安装，可以通过npm或yarn # 通过 npm 安装 npm i vant -S # 通过 yarn 安装 yarn add vant 1，自...
Vant 组件库的安装、按需引入、全局引入及样式修改
m0_61663332的博客
12-26 5722
Vant 移动端组件库的安装、按需引入、全局引入及原有样式修改
微信小程序怎么引入vant组件
06-01
要在微信小程序中使用vant组件，需要先进行以下步骤： 1. 在小程序的根目录下，使用命令行工具安装vant组件库： ``` npm i vant-weapp -S --production ``` 2. 在小程序开发工具中，点击菜单栏的工具 -> 构建npm...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值