小程序npm使用——以vant-weapp为例

最新推荐文章于 2024-05-15 04:16:30 发布
最新推荐文章于 2024-05-15 04:16:30 发布
阅读量2.2k 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43848576/article/details/97629285
版权

打开项目终端，初始化

npm init —— 一直回车，直到出现yes——yes——回车

安装包

npm i vant-weapp -S --production

开发者工具——左上角工具 => 构建npm 这一项，点击进行构建。

开发者工具——左上角设置 => 项目设置——勾选使用npm模块

然并卵 总是丢失文件 报错

方法二

npm i vant-weapp -S --production
把dist文件剪切出来放在项目任意位置
页面使用，
json文件

"usingComponents": {
    "van-button": "/utils/dist/button/index"
  }
页面文件
 <van-button type="warning">警告按钮</van-button>
小曲曲
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
微信小程序npm引入vant-weapp的踩坑记录
12-01
微信小程序项目使用npm安装vant-weapp的正确步骤  使用npm安装vant-weapp 到项目根目录下： npm i vant-weapp -S --production 然后再详情中选中使用npm模块，然后点击工具栏中的构建npm。本以为这样就可以安装成功了，结果 没有找到npm包 这让我纠结了一个早上。看了文档，琢磨了很久，最后研究出问题的关键。 第一步：使用cmd进入项目根目录：npm init 然后一直按回车 第二步：输入你要安装的文件（npm i vant-weapp -S --production ） 如果已经之前安装了vant-weapp的，就直接到工具栏中选中
小程序tabBar示例
05-31
小程序自定义babBar示例，两种模式，至于样式可以根据自己项目需求进行改写
微信小程序项目使用npm安装vant-weapp的正确步骤及错误处理方法_weappdev
最新发布
2401_85015094的博客
05-15 974
2.2 - 在根目录下面执行命令： npm init2.3 - 看到下图证明npm 初始化成功根据上面的步骤，现在npm 初始化完成啦，现在去安装vant - weapp 库。
小程序中使用vant-weapp
weixin_45379180的博客
08-25 262
1 使用地址 https://youzan.github.io/vant-weapp/#/quickstart 需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下 1 通过 npm 安装 npm i @vant/weapp -S --production 2.进入小程序根目录，打开cmd，输入：npm init （尤为重要） 3 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件 .
小程序+ vant-weapp使用
weixin_45379180的博客
12-09 623
https://blog.csdn.net/weixin_47426557/article/details/119801066?spm=1001.2014.3001.5501 https://blog.csdn.net/weixin_47426557/article/details/119803810
小程序自定义 tabbar 以vant weapp为例
江湖行骗老中医
10-22 4968
1.首先创建custom-tab-bar文件夹 包含index.jsindex.jsonindex.wxml // index.js文件 // index.js文件 Component({ data: { active: 0, list: [ { "url": "/pages/mine/mine", "icon": "wap-home-o", "text": "开单" }, ...
小程序使用 组件库 vant-weapp详细教程
weixin_56848461的博客
03-23 2111
小程序使用 组件库 vant-weapp详细教程
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
vant-weapp_to_rpx:转换vant-weapp的样式文件中px为rpx
05-07
vant-weapp_to_rpx转换vant-weapp的样式文件中px为rpx基于安装npm install或单独下载gulpfile.js 安装依赖npm install --save-dev gulp gulp-postcss postcss-pxtransform使用将小程序项目下 miniprogram_npm\vant-...
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
本示例原本是从vant官方发布的微信演示示例转换而来,支持微信小程序（H5不支持！！）。 vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供...
小程序 | 使用 npm 模块配置 Vant Weapp 框架
ParallelLight
04-24 376
之前体验了 iView 的UI框架，感觉还可以主要是因为在开发体验上比原生敲代码好很多，不过 iView 框架可利用的组件较少，比如搜索框的组件等并未涉及，而且已有的组件也存在一些需要自行生硬的修改才能实现的问题（也可能是自己有点儿菜没掌握精髓），不过总的来说还是蛮不错的，继 iView 之后，最近新体验了一下 Vant UI 框架，新学习了 npm 模块配置框架，体验感有所上升，也不辜负CV操作之后学到了新东西。 这篇文章主要记录使用 npm 模块配置 Vant UI 框架 文章目录1.使用cm.
微信小程序npm-vant
YarMing的博客
06-10 160
相关文档基于node.js https://youzan.github.io/vant-weapp/#/intro 初学错误代码解决方案 https://blog.csdn.net/qq_38845493/article/details/90203128 涉及到request第三方 https://github.com/request/request-promise ...
小程序使用npm搭建vant
qq_44538205的博客
04-24 286
一、 使用npm安装插件 在小程序的根目录使用cmd（管理员）执行 npm init npm install --production npm install --save miniprogram-recycle-view 移除包 npm uninstall miniprogram-recycle-view 在安装vant插件执行 npm i @vant/weapp -S --production...
小程序使用npm包
github_38928905的博客
04-30 111
1 、开发工具 【详情-》本地设置 -》使用npm模块】 2、手动初始化package.json 通常npm下载包的时候会自动初始化，但是当你下载包后也没有package.json文件的时候，手动创建： npm init 注意：这里是一定要有的，没有的话下面点击构建的时候会报没有找到可构建npm包 3、下载所需包 npm i 包名 --production 4、开发工具中的工具，点击构建npm ...
微信小程序开发——黑马Day5
zyw2002的博客
01-19 4630
文章目录使用npm 包全局数据共享分包自定义tabBar 使用npm 包 小程序对npm 的支持与限制目前，小程序中已经支持使用npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm 包有如下3 个限制： ①不支持依赖于Node.js 内置库的包 ②不支持依赖于浏览器内置对象的包 ③不支持依赖于C++ 插件的包 Vant Weapp 1.什么是Vant Weapp Vant Weapp 是有赞前端团队开源的一套小程序UI 组件库，助力开发者快速搭建小程序应用。它所使用的是MIT 开
小程序开发工具使用 npm 安装 Vant Weapp UI 库
江湖行骗老中医
11-09 853
首先生成一个 package.json 文件 在小程序前端目录下，执行 npm init 添加 vant-weapp 依赖 npm i vant-weapp -S --production 安装依赖，构建 之后，在小程序开发工具中，选择小程序前端的根目录，点击菜单中的 ‘工具’ - ‘构建 NPM’ OK，构建完成。可以看到，当前目录下多了一个目录 miniprogram_n...
微信小程序—使用npm（第三方包）
qq_45335911的博客
10-04 725
新建一个wechat小程序项目（这里我起的名字是wechat-npm-case），如图： 初始化npm：在你所建项目的根目录下，使用npm init -y，初始化一下 执行npm init 开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块) 根目录下新建 node_modules 文件夹: mkdir node_modules cd node_modules 进入新建的 node_modules，执行下面命令： npm install miniprogram-datepicker -.
npm构建vant-weapp
LittleBerlin2的博客
11-10 339
npm构建vant-weapp 1. 打开指定文件的cmd 2. 执行npm i vant-weapp -S --production 3. 如果出现package.json相关报错 则执行npm init -y 4. 接着重新执行npm i vant-weapp -S --production 5. 打开微信开发者–工具–npm构建 6. 在json文件中引入组件“usingComponents:{}”后就能在wxml文件中使用 ...
vant部署_小程序开发工具使用 npm 安装 Vant Weapp UI 库
weixin_34420979的博客
12-24 172
由于 Vant Weapp UI 官方推荐使用 NPM 安装，所以尝试了一下，确实方便。首先生成一个 package.json 文件在小程序前端目录下，执行npm init添加 vant-weapp 依赖npm i vant-weapp -S --production安装依赖，构建之后，在小程序开发工具中，选择小程序前端的根目录，点击菜单中的 ‘工具’ - ‘构建 NPM’OK，构建完成。可以看到...
uniapp如何使用和安装vant-weapp
07-27
要在uniapp中使用和安装vant-weapp，您可以按照以下步骤进行操作： 安装vant-weapp： 1. 在您的uniapp项目根目录中，打开命令行工具（如终端）。 2. 运行以下命令来安装vant-weapp： ``` npm install vant-weapp -S --production ``` 或者，如果您使用的是yarn包管理器，可以运行以下命令： ``` yarn add vant-weapp --production ``` 3. 安装完成后，您将在项目的 `node_modules` 目录下找到 `vant-weapp` 文件夹。 使用vant-weapp： 1. 在uniapp的页面中，找到需要使用vant-weapp组件的页面。 2. 在页面的json配置文件中，添加以下代码以引入vant-weapp组件： ```json { "usingComponents": { "van-button": "vant-weapp/dist/button/index", "van-cell": "vant-weapp/dist/cell/index", // 添加其他需要使用的组件 } } ``` 3. 在页面的vue文件中，即 `.vue` 文件中，您可以使用vant-weapp的组件了。例如，在模板中使用van-button组件： ```html <template> <view> <van-button type="primary">按钮</van-button> </view> </template> ``` 4. 您可以根据vant-weapp的官方文档，自行查阅各个组件的使用方法和属性。 需要注意的是，vant-weapp是基于微信小程序开发的，因此在使用时需要注意一些微信小程序的特性和限制。另外，由于uniapp支持多端开发，包括H5、App、小程序等，vant-weapp在不同端的兼容性可能会有所差异，您可以参考vant-weapp的官方文档来了解更多详情。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

小曲曲

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

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

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

打赏作者

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

抵扣说明：

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

余额充值