VantUI组件的安装和使用

### 如何在 UniApp 中集成和使用 Vant UI 组件库 #### 创建新项目 在 HBuilder X 中新建一个 uni-app 的项目。 #### 初始化 npm 配置 当提示项目创建成功后，在 HBuilder X 使用命令行窗口打开创建好的项目，执行 `npm init -y` 指令来初始化项目的配置文件 package.json[^3]。 #### 安装 Vant Weapp 版本 通过命令行工具继续操作，输入如下指令安装 Vant Weapp 版本： ```bash npm i @vant/weapp -S --production ``` #### 复制组件至指定位置 完成上述步骤之后，在项目的根路径下建立 wxcomponents 文件夹。随后将 node_modules 下的 @vant 文件夹中的 dist 文件夹复制到刚建好的 wxcomponents 文件夹中，并重命名为 vant[^1]。 #### 注册与引入组件 编辑 pages.json 文件，在其中注册所需使用的 Vant 组件。例如要使用按钮组件，则添加如下内容： ```json { "path": "pages/index/index", "style": { ... }, "usingComponents": { "van-button":"/wxcomponents/vant/dist/button/index" } } ``` 注意确保 JSON 对象内的属性名和值之间有正确的冒号以及逗号分隔符[^2]。 #### 修改页面代码以使用组件 最后可以在对应的页面模板文件 .vue 或者其他支持的地方直接书写标签 `<van-button>` 来应用该组件功能。