如何在微信小程序里面使用npm安装第三方插件（以安装vant ui为例）

7月前作者：weixin_43795761 分类：Toy博客阅读(36) 违法举报

这篇具有很好参考价值的文章主要介绍了如何在微信小程序里面使用npm安装第三方插件（以安装vant ui为例）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.在cmd里或者是终端里，找到对应的项目，并执行下面的命令，用来初始化package.json文件。

npm init -y

微信添加第三方插件,微信小程序,微信小程序,npm,前端

2.勾选下图选项
微信添加第三方插件,微信小程序,微信小程序,npm,前端

3.执行下面的命令安装vant ui

npm install @vant/weapp

然后你会发现多了一个node_modules文件，里面存的就是第三方组件。
微信添加第三方插件,微信小程序,微信小程序,npm,前端

4.最后一步，每次安装完一个新的第三方插件都要执行“构建npm”
微信添加第三方插件,微信小程序,微信小程序,npm,前端
执行完后会出现如下文件夹，小程序使用的其实不是node_modules下面的组件，而是miniprogram_npm文件夹下构建的组件。

微信添加第三方插件,微信小程序,微信小程序,npm,前端

5.使用示例
引入，左边是自定义的，右边是路径。
微信添加第三方插件,微信小程序,微信小程序,npm,前端
使用展示
文章来源地址https://www.toymoban.com/news/detail-628770.html

到了这里，关于如何在微信小程序里面使用npm安装第三方插件（以安装vant ui为例）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

在微信小程序中如何支持使用流模式（stream），打造ChatGPT实时回复机器人，最详细讲解。

有开发过ChatGPT相关应用的都知道，小程序是不支持流式请求的，目前市面上大多数开发者的解决方案都是使用websocket来解决。还有一部分开发者是小程序嵌套网页解决这个问题，前者对于我们软件销售型的团队来说，交付会很麻烦，而且问题也会很多，而后者主要是体验不

2024年02月06日
浏览(44)
在微信小程序中如何引入iconfont

略 iconfont 指 https://www.iconfont.cn/。通过 iconfont 可组建自己的图标库。注册帐号创建项目添加图标 Font Family：默认为iconfont。当项目中已有iconfont名称的字体时，需要使用不同的名字。略将 iconfont.css 重命名为 iconfont20231007.wxss 将 iconfont20231007.wxss 文件复制到小程序的font目录

2024年02月03日
浏览(56)
微信小程序使用 npm 安装第三方包

微信小程序支持使用 npm 安装第三方包。在小程序根目录下执行 npm install 第三方包名安装 npm 包。点击开发者工具中的菜单栏：工具 -- 构建 npm 完成构建。就可以使用 npm 包了。

2024年02月11日
浏览(40)
在微信小程序中如何改变默认打开的页面

在微信小程序中，在我们编写页面的时候，可能会在重新渲染的时候导致页面跳转到默认打开的页面上，为了提升用户的一个体验，我们可以设置一些内容来修改小程序默认打开的页面，提升开发者的开发体验。当我们打开一个微信小程序的时候，这里是普通编译那么，我

2024年02月03日
浏览(54)
如何在微信小程序中实现音视频通话

微信小程序的音视频通话可以通过微信提供的实时音视频能力实现。这个能力包括了音视频采集、编码、传输和解码等多个环节，开发者只需要使用微信提供的 API 接口就可以轻松地实现音视频通话功能。在具体实现上，开发者需要先在微信开放平台上注册并创建小程序，然

2023年04月09日
浏览(34)
如何在微信小程序中加载自己的地图数据

由于微信小程序无法进行DOM操作，导致像openlayers、leaflet这种常用的js库无法在微信小程序内使用，导致加载高德、百度、mapbox还有自定义的瓦片地图数据变得很困难。目前，大多数情况下是使用以下三种方法实现加载自定义的瓦片数据。 1. 使用web-view 优势：可以使用丰富的

2024年02月10日
浏览(42)
在微信小程序中如何配置腾讯位置服务并调用

因为很多服务都已经被封装好了，所以我们只需要调用引入配置就行了。下面进入正题，我们要先先注册一个账号，然后点击控制台，进去以后找到左侧的应用管理，然后点击创建应用，创建完成以后点击添加key 添加好以后点编辑然后填写好相应的信息然后我们要下载

2024年02月09日
浏览(52)
uniapp项目如何运行在微信小程序模拟器上

在HbuilderX中的小程序写完后自己一定要保存，否则会出不来效果那么怎么让uniapp项目运行在微信小程序开发工具中呢 1 在hbuilderx中点击运行到小程序模拟器 2 然后在项目目录中会生成一个文件夹在微信小程序开发软件中的工具安全设置打开端口或者在微信小程序中导入项目

2024年02月13日
浏览(33)
在微信小程序中怎么使用vant框架？

Vant 是一个轻量、可定制的移动端组件库，于 2017 年开源。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。 Vant 是有赞前端团队开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所

2024年02月10日
浏览(46)
在微信小程序使用picker实现日期选择

而且选择开始时间后，选择结束时间，能够选择的日期不能比开始日期还要早。要实现以上效果可这样写：在wxml中写

2024年02月16日
浏览(44)