小程序如何使用vant

小程序如何使用vant

使用 Vant Weapp 前我强烈的建议大家去看下微信官方的 小程序简易教程 和 自定义组件介绍 点击下方超链接

https://youzan.github.io/vant-weapp/#/quickstart

第一步
首先我们先创建一个项目 跟着打开终端，cd 到小程序目录中，然后键入以下命令 初始化项目：

npm init

然后一直回车直到如下面的图片 然后输入yes 再按回车

这个时后我们的目录里多了一个package.json 文件：

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

npm i @vant/weapp -S --production

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

安装成功入下面的图片
第三步
打开微信开发者工具（必须是新版本），在菜单栏依次点击【工具】→【构建npm】。

然后会弹出来构建成功点击确定

构建完毕后，会出现一个 miniprogram_npm 文件夹：
里面的 @vant 里面全都是框架为我们写好的组件

第四步
打开微信开发者工具，依次点击【详情】→【本地设置】→【勾选 “使用npm模块”】：

第五步
将 package.json / node_modules 移入 miniprogram_npm 文件夹下，请用 windows管理器 移动：

移入的时候会报我们的程序正在运行 这时候我们关闭所有的程序 然后在我们的文件夹中移入

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

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

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

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

用什么，就引用什么。

然后，直接使用组件就可以了：

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