小程序引入vant weapp组件的方法

最新推荐文章于 2024-06-09 15:43:02 发布
最新推荐文章于 2024-06-09 15:43:02 发布
阅读量235 收藏
点赞数
文章标签： 小程序 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70703397/article/details/130008156
版权

官方文档Vant Weapp - 轻量、可靠的小程序 UI 组件库
安装时不要按照官方的走
流程：

  1. npm下载
npm i @vant/weapp -S --production

下载完的目录

 

      2. 把里面的dist文件夹复制出来，放到项目的根目录，重命名为vantweapp
现在的结构目录如下 

 

     3. 使用组件，以button为例，这是官方的引入，将红框中的复制，写在app.json中 

      4. 将路径改成这样

"van-button": "vantweapp/button/index"

 5. 如果是写在单个页面的json中，路径前面加../../

小毕学习代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序
byCidde的博客
11-02 2894
uniapp平台使用vant组件按需引入，并兼容到微信、百度、抖音小程序
【微信小程序】使用npm并引入vant-weapp组件库
RogerQianpeng的博客
12-06 620
vant文档与微信小程序文档写得弯弯绕绕，你引用我，我引用你，还给出了多种不同情况下的选项，甚至有步骤缺失，导致踩了一点小坑，浪费了一些没必要的时间，这里给出完整可行的实现方法，以供参考。首先，当然是先建一个微信小程序新建一个终端，执行，进行npm初始化，会生成一个package.json 此条在官方文档中未说明下载一下 此条官方文档给出了多条选择打开app.json，删除 此条官方文档在“注意”中说明了现在普遍使用的新版本配置方法屏幕最顶栏菜单，菜单-工具-构建npm 在app.json中引入具体组件，然
小程序引入第三方组件库，以vantweapp为例
weixin_43893844的博客
09-28 751
小程序引入第三方组件库，以vantweapp为例
UniApp+Vue3使用Vant-微信小程序组件
最新发布
qq_45623072的博客
06-09 544
在page.json。
参照Vant-Weapp开发的抖音原生小程序UI组件库.zip
02-25
如题，抖音小程序源码，易于运行部署，用于学习交流
Vue3+Vant4实现抖音短视频功能
qq_51076413的博客
01-28 755
Vue3实现抖音短视频功能；Vue3、Vant4实现抖音短视频功能；Vue+Vant实现抖音短视频功能；前端实现抖音短视频功能；Vue、Vant实现抖音上滑下滑播放视频功能；
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
微信小程序使用Vant Weapp组件库的方法步骤
12-11
1. **引入组件**: 在小程序的页面配置文件（如 `page.json`）中，通过 `"vant-weapp/button"` 引入所需的 Vant 组件。例如，如果需要使用按钮组件，可以这样写： ```json { "usingComponents": { "van-button": ...
小程序引入vant组件（已解决）
01-03
我找到方法了，你只需要把miniprogram_npm/vant-weapp里的组件文件夹都删除，之后再https://github.com/youzan/vant-weapp下载一份vant， 将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）中的文件复制到 ...
vant组件小程序版 适用小程序
09-01
- `README.md`：项目介绍和使用指南，详细解释如何安装和引入Vant WeApp到小程序项目。 在实际开发中，开发者可以通过npm或 yarn 安装Vant WeApp，然后在小程序项目的`json`配置文件中引入，接着在Vue组件中按需...
微信小程序引入VANT组件的方法步骤
10-16
为了引入VANT组件，我们需要安装VANT的微信小程序版（vant-weapp）。在终端中输入以下命令： ```bash npm install vant-weapp -S --production ``` 这将安装VANT组件库，并将其作为项目依赖添加到`package.json`中...
在微信小程序中使用vant的方法
12-03
在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S –production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口,依次输入以下命令 npm init 初始化 npm install --production npm i vant-weapp -S --production 第二
小程序中使用vant框架
WeiflR10的博客
04-21 398
在你小程序的根目录下cmd命令进入 1.初始化npm 终端输入npm init，回车，根据提示输入项目信息（其实一直回车就可以了，会自动输入默认信息），成功后会在项目下生成package.json文件。 2.接下来生成package-lock.json，记录使用的第三方插件： npm install --production 使用--production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小。 3. ......
uniapp+vant 实现抖音短视频分类切换播放
GongWei_的博客
04-09 2635
功能点： 上下滑动切换视频；tab标签切换分类 <template> <view class="app"> <view class="header"> <view class="back"></view> <van-tabs v-model="activeName" @click="onClick" style="width: 60%;background: rgba(255,255,255,0);"> &..
今日头条&抖音小程序开发文档
热门推荐
初心 - 杨瑞超个人博客
02-13 2万+
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群): 757345416丨(IT-程序猿-技术交流2群): 936929828 问题：百度上直接搜索“ 今日头条小程序开发文档 ” 或 “ 抖音小程序开发文档 ”，是搜不出来开发文档的，你可以搜索 “ 字节跳动小程序 ”。 点击这里可直接进入开发文档，或直接点击：https://developer.toutiao.com/docs/...
小程序引入Vant Weapp比官网更全的教程
weixin_42401291的博客
08-31 1728
https://www.jianshu.com/p/4cb92bcd2ef6 一、下载微信开发工具[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html] 二、在本地新建一个空文件夹 三、打开微信开发者工具新建小程序快速模板 四、cmd到当前目录执行 1、第一步：npm init 2、第二步：npm install --production 3、第三..
小程序引用zanui ——vant weapp
samll_cat的博客
05-16 414
1. 在已有的小程序根目录下或新建的小程序项目中执行 npm init 这一步蛮重要的！ 2. 在小程序工程的根目录下执行 npm i vant-weapp -S --production 3. 保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“ 4. 构建完成后多出一个目录“miniprogram_npm”，这个就是小程序可以识别的npm第三方库 5.在需要的页面引入 "u...
在小程序中使用Vant组件
io_123io_123的博客
03-07 886
微信小程序中，Vant的安装的使用
【微信小程序遇到的坑】 使用npm引入vant组件
superKM的博客
04-26 1万+
从小程序基础库版本2.2.1或以上、及开发者工具1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 直接创建小程序，从工具>构建npm，会弹出没有找到node_modules目录，因此以引入vant组件为例。 1，创建普通项目后在右上角详情中，打开使用npm模块。 2，鼠标放在目录上右键，打开终端，切换到根目录 3，直接使用np...
微信小程序按需引入vantweapp
06-10
要按需引入vantweapp，你需要先安装babel-plugin-import插件。然后，在你的代码中，使用import { 组件名 } from 'vantweapp/lib/组件名'来按需引入vantweapp的组件，例如： ``` import { Button, Dialog } from 'vantweapp/lib'; Vue.use(Button); Vue.use(Dialog); ``` 这样就只会将你需要的组件打包进你的小程序，减少了打包后的文件大小。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小毕学习代码

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

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

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

打赏作者

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

抵扣说明：

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

余额充值