小程序使用vant weapp组件库；构建npm，附源码

原创已于 2022-07-01 16:56:48 修改 · 484 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#npm #小程序 #前端

于 2022-06-29 10:23:50 首次发布

小程序项目类专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何创建微信小程序项目，并使用Vant组件库进行开发。首先，通过npm初始化项目，然后安装Vant组件库，接着构建npm。在配置文件project.config.json中设置相关路径，最后在项目中使用 vant-button 组件，删除全局样式以确保组件样式生效。通过这些步骤，成功集成并测试了 vant 组件。

1、创建小程序项目

在这里插入图片描述

可以使用测试号，也可以用自己的appid

2、新建终端，

在这里插入图片描述
npm init -y

会在项目根目录中增加一个package.json文件

3、安装组件库

vant组件库地址
在这里插入图片描述
终端执行npm i @vant/weapp -S --production

会在根目录增加package-lock.json文件和node_modules文件夹

4、构建npm

小程序工具–>构建npm
在这里插入图片描述

在这里插入图片描述
项目中会出现下图，组件就安装好了

5、修改配置文件project.config.json

在这里插入图片描述

在这里插入图片描述
注意：miniprogramNpmDistDir的路径配置

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

6、使用组件

在这里插入图片描述

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

在这里插入图片描述
将全局的"style": “v2”,删掉，是为了避免组件样式无法完全覆盖微信样式。
删除前后的对比：按钮的宽度会不一致
删除前

删除后

7、测试一下

在index.html中添加组件按钮，就可以成功使用了
在这里插入图片描述

以上demo源码地址，可点击直接下载使用