微信小程序使用vantweapp组件库问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

在开发微信小程序的时候，喜欢使用vantweapp的组件库。通过引入组件来进行快速的开发，但是在使用微信开发工具的时候就会遇到各种问题，比如微信开发工具的终端不能输入内容，npm 无法启动命令等等的一些问题，今天就尝试写下我的解决办法。一个正常使用vantweapp官网的方法，一个是我的使用方法。

一、引入组件库

1、通过npm安装

# 通过 npm 安装 npm i @vant/weapp -S --production 

# 通过 yarn 安装 yarn add @vant/weapp --production 

# 安装 0.x 版本 npm i vant-weapp -S --production

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

然后打开--工具---选择构建npm

然后选择 详情--本地配置--勾选npm 模块

修改app.js

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

以上就是vantweapp组件库的官网使用方法，但是有时候你会发现，终端是无法输入的，或者是点击npm构建的时候无法生成对应的包文件，导致失败。

2、直接把依赖包按照官网的文件构成来引入vantweapp的依赖包

在npm构建的文件目录为miniprogram_npm，所以我们新建一个文件夹miniprogram_npm，如下图

然后我们再把vantweapp的依赖文件给直接导入

这样我就可以使用了。

但是有时候我们没有办法直接拿到这个新的依赖包文件和配置文件，我们找到官网的示例工程，把实例项目给下载，然后再把对应的文件给引入到自己的项目中来进行使用。

二、使用组件库

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

// 通过下载源码使用 es6版本
// app.json
"usingComponents": {
  "van-button": "path/to/@vant/weapp/dist/button/index"
}

这样就可以在微信小程序的项目使用vantweapp组件库了。