微信小程序导入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的按钮组件啦(✪▽✪)
   

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