美化微信小程序的界面--微信小程序开发中使用vant的完整步骤

我们都知道，虽然微信小程序的wxcss与css类似，但我们写前端一个个的样式去写完，不太现实，没有那个时间，也没有那个必要。其实早就有类似的样式插件可以解决这些问题。这里我们就来看看vant在微信小程序中的使用。

一、环境安装

首先，如果你没有安装npm的话，第一件事就是要使用node.js将其内置的包管理器即npm(node package manager)安装上,否则仅仅按照vant官网的步骤是完成不了的。肯定是会遇到报错的，
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请
确保路径正确，然后再试一次。
所在位置行:1 字符: 1
如图：

对于这种报错，你也不必要跑到windows的终端去试了，没有用的，npm都找不到，问题在于你没有安装node.js.。

1、现在并安装node.js

官网下载吧！安装一个先！官网的下载速度很快，不必去找其他的下载源。

如下图这样，估计你就安装成功了（记得，先前打开的终端工具先退出再进入，否则终端不认识新安装的node.js）。

2、微信开发者工具中初始化npm

我们再次回到微信小程序开发者工具中（记得一定先退出开发者工具，然后后再进入，否则新安装的npm它是不认识的），输入:npm init -f

执行成功后，我们会看到我们的项目中多了一个文件package.json，这就是npm正式为你服务了。

3、执行npm install

上面的步骤配置完成后，不要着急去做npm的构建，必须先安装npm install，否则你会得到以下的报错
message：发生错误
Error: F:\Projects_All\WeChatProjects\wendaowenyao\package.json 对应的 node_modules 不存在，请在 F:\Projects_All\WeChatProjects\xxxxxxx 执行 npm install
appid: wx0ba23a871dbfed20
openid: o6zAJs4oJyd1-fpVg7PrWrJB9xKw
ideVersion: 1.06.2209190
osType: win32-x64
time: 2022-10-09 21:15:29
在微信的终端里执行npm install,大概需要三分钟左右：

安装完成则会在小程序的miniprogram目录树中多出一个目录miniprogram_npm

那么还需要安装
npm install --production

执行完npm i @vant/weapp -s后，在miniprogram_npm下就多出一个@vant的目录

最后一步，在工具菜单中找到npm构建

二、json配置

1、配置好app.json

在app.json中的style：v2去掉，这个样式是微信默认提供的样式。

2、配置好project.config.json

把上面两个字段更换为：

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

三、引入组件开始使用

我们可以根据官网的快速上手的手册来引入组件了，可以在app.json全局引入，也可以局部的单独页引入。引入前设置 “component”:true

1、在app.json引入

这里引入了三种组件，值得注意的是，组件都在miniprogram_npm下@vant的目录里，所以拷贝进来的这些代码，一定要看清楚路径，否则会报错找不到某某组件的文件。我这里是放在app.json下，路径就该是下图这样。

2、引入局部独立页json中

{"component": true,"usingComponents": {"van-divider": "@vant/weapp/divider/index","van-button": "@vant/weapp/button/index","van-field": "@vant/weapp/field/index","van-search": "@vant/weapp/search/index"}
}