微信小程序 - Vant UI 框架环境搭建(Window)

矫情吗；* 2023-02-27 13:42 23阅读 0赞

## 简介 ##

轻量、可靠的小程序 UI 组件库。

**使用 Vant Weapp 前，请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。**

> 我强烈推荐你打开 [官方文档][Link 1]，对照着本教程，一起对比搭建坏境。

## 第一步 ##

> 我这里创建一个纯净的 hello world 小程序项目。

打开终端，`cd` 到小程序目录中，然后键入以下命令 **初始化项目：**

npm init

一路 **回车** 即可，大概类似如图结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]  
这时就会多一个 `package.json` 配置文件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]

## 第二步 ##

接下来，正式安装 `Vant-weapp` ，还是在 **小程序目录** 终端里继续键入以下命令：

npm i @vant/weapp -S --production

*  i 是 install 的简写形式。
 *  \-S 是 --save 的简写形式，即写入 dependencies。
 *  –production 表示下载模块到 node\_modules 目录中。

> 如果你的 npm 安装太慢，建议换源。[点击查看教程][Link 2]

安装成功反馈提示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]  
目前文件目录如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 3]

## 第三步 ##

打开微信开发者工具（必须是新版本），在菜单栏依次点击【工具】→【构建npm】。  
![在这里插入图片描述][20200718085815453.png]

构建完毕后，会出现一个 `miniprogram_npm` 文件夹：  
![在这里插入图片描述][20200718103957353.png]  
不难发现，里面的 `@vant` 里面全都是框架为我们写好的组件。

## 第四步 ##

打开微信开发者工具，依次点击【详情】→【本地设置】→【勾选 “使用npm模块”】：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 4]

## 第五步 ##

将 `package.json` / `node_modules` 移入 `miniprogram_npm` 文件夹下，请用 `windows管理器` 移动：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 5]  
提示文件正在使用，先关闭微信开发工具，最后是如图所示结果：  
![在这里插入图片描述][20200718104954700.png]  
当然，你在编辑器里肯定看不到 `node_modules`。

## 第六步 ##

将 `app.json` 中的 `"style": "v2"` 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 6]

## 使用 ##

以 `Button` 组件为例，只需要在 `app.json` 或 `index.json（其他页面）` 中配置 Button 对应的路径即可。

**例如，我要在 index 首页使用组件：**

首先找到 index.json，输入以下配置：

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

用什么，就引用什么。

--------------------

然后，直接使用组件即可：

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

[Link 1]: https://youzan.github.io/vant-weapp/#/quickstart
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70]: /images/20230209/cebb9ba1210841e79ee95d1ad196b6dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020071808503941.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[Link 2]: https://blog.csdn.net/weixin_44198965/article/details/104115024
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200718103731630.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200718103822326.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[20200718085815453.png]: https://img-blog.csdnimg.cn/20200718085815453.png
[20200718103957353.png]: https://img-blog.csdnimg.cn/20200718103957353.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200718090239274.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200718104617267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70
[20200718104954700.png]: https://img-blog.csdnimg.cn/20200718104954700.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200718105214780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE5ODk2NQ==,size_16,color_FFFFFF,t_70