网上有很多微信小程序使用vant-weapp组件库的详细教程，但是，关于抖音小程序使用vant-weapp的教程几乎很少，导致很多开发同学误以为能直接照搬微信小程序的教程。最后发现使用的时候不生效。

抖音小程序是属于抖音平台的应用程序，在这一基础前提下，更多的是为抖音app提供服务，因此注定了会与微信小程序有不同之处，而npm构建依赖包这块正好也与微信小程序不同。

抖音小程序有自己的npm构建方式，阅读官方文档 npm支持 可以更好的理解如何构建！

如果想快速通关，可以直接看下面教程：

构建package.json文件

官方编辑器已经支持直接构建npm了，打开编辑器，选择 npm功能，此时会出现 初始化ppackage.json 按钮。点击运行，就会在我们项目根目录生成package.json文件。和执行 npm init 命令同理。

安装依赖包

当执行完初始化按钮后，就会出现 运行依赖 和 开发依赖。运行依赖等价于生产依赖包；开发依赖等价于开发依赖包。

鼠标移动到运行依赖上，会出现一个加号按钮，点击加号则会出现一个输入框，让你输入需要安装的依赖包名称，安装包名称以vant为例，格式：@vant/weapp 。未指定版本时，默认会安装最新版本，如需指定版本，只需在后面加入版本号@1.0.0 即可，格式：@vant/weapp@1.0.0。

当安装完以后，会出现下图这种情况，运行依赖中会存在安装的依赖包；同时package.json文件中也会出现相应的依赖包名。此时打开项目目录，会发现出现了一个node_modules文件夹，这个文件夹是存放依赖包文件的，切误删除

回到npm功能模块中，选择npm构建按钮，它会生成一个文件夹miniprogram_npm，然后将node_modules中的依赖包dist文件夹迁移到miniprogram_npm文件夹中。有兴趣的同学可以自己对比一下2个文件的不同之处。

vant-weapp使用

很多同学之前都写过微信小程序，微信小程序支持全局定义公共组件。但是抖音小程序不支持这个属性，因此迁移过来的代码会不生效，只能页面自己单独引入。

index.json文件中引入

{
    "usingComponents": {
        "van-button": "/miniprogram_npm/@vant/weapp/button/index"
    }
}

index.ttml使用

<van-button type="primary">vant按钮</van-button>

尾声

很多同学在使用的过程中发现，部分组件样式或功能不能兼容抖音小程序，此时需要去vant社区反馈了，反馈地址：https://github.com/youzan/vant/issues

同时也需要自己阅读源码，及时解决面临的问题！！！