如何在微信小程序引入第三方组件

---

前言

微信小程序的开发过程越来越简便，上手十分快，如果是学过vue的同学做起来就更觉得十分亲切了。微信小程序更多是引入第三方组件库进行开发，顾名思义就是借用别人的模板进行创作，那么这里给大家完整介绍如何把第三方组件库引入到项目中。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、新建一个项目

二、引入组件库

（一）执行nmp init命令创建package.json文件

执行nmp init命令创建package.json文件

init npm

- 这里注意要在根目录右键在内建终端中打开

之后一路回车就可以了，也可以输入你自己想设置的信息

接着大家可以发现在目录下面会多了一个新的文件：package.json

（二）引入组件库

这里我们用vant Weapp作为用来引入的库

这里有两种方法可以引入：
1、在终端进行引入

npm i vant-weapp -S --production

2、在官网下载zip包，解压后将文件添加至项目
这里贴出vant Weapp 给出的官方示例

三、构建npm

在引入组件之后我们会发现添加了一个新的文件夹 node_modules

接着在右上角的详情处勾选使用npm模块

接着在工具栏找到工具，选择构建npm

构建成功！

到这里就完成了库的引入，接下来就是组建的使用啦~

四、使用组件

（一）在.json文件引入组件

首先在你想要使用的页面的json文件里添加组件，这里我用index页面作为例子，往里面添加button按钮。

{
  "usingComponents": { 
    "i-button": "../../miniprogram_npm/vant-weapp/button"
  }
}

（二）修改wxml文件

<!--index.wxml-->
<view class="container">
  <i-button type="default">默认按钮</i-button>
<i-button type="primary">主要按钮</i-button>
<i-button type="warning">警告按钮</i-button>
<i-button type="danger">危险按钮</i-button>
</view>

这就是最终的效果图啦！！

希望可以对你有帮助哦
学习愉快。