微信小程序导入Vant Weapp组件库

超详细！微信小程序导入Vant Weapp组件库

Vant Wepp组件库轻量、可靠，同时组件样式丰富美观，容易上手，我们可以引入该组件库来实现小程序的相关界面样式。
Vant Weapp组件库官方文档–请用电脑查看哦

以下是微信小程序导入Vant Weapp组件库的步骤：

需要注意的是，导入Vant Weapp需要npm支持，也即需要安装npm包。如果微信小程序pages目录下没有package.json文件，如下图所示：

此时安装npm 包会失败，这时需要先运行npm init命令，具体过程如下：

1. 鼠标右击pages目录，选择最后一项打开终端
   
   在终端输入 npm init 命令后一直按回车，直至生成package.json文件。

2. 接着继续输入 npm install 命令并按回车，即可成功安装npm包。
   

3. 然后在终端中继续输入命令 npm i @vant/weapp -S --production 即可安装vant/weapp组件库。
   

4. 我们回到资源管理器目录，将app.json文件中的 “style”: “v2” 去掉。
   

5. 并在 project.config.json 文件内添加如下配置：

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

6. 接着点击开发者工具中的菜单栏：工具 --> 构建 npm
   
   并在小程序右侧，详情 --> 本地设置中，勾选上“使用npm模块”。
   
   即可生成miniprogram_npm文件。由于node_modules文件的内容与miniprogram_npm文件的重复，此时我们可以删除node_modules文件以减小内存，之后也不会影响Vant Weapp组件的使用。
   

7. 如果一直按照上述步骤进行，没有做其他改动的话，按照以下步骤即可成功使用Vant Weapp组件：

这里以按钮组件为例：
在index.json文件里写如下代码：

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

在index.wxml文件里写如下代码：

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

即可成功显示Vant Weapp的按钮组件啦(✪▽✪)

到这里就结束啦，感谢您的支持/玫瑰~