uniapp微信小程序使用vant-weapp详细操作步骤（各种坑）

首先在微信小程序里用的vant是vant-weapp而不是vant

官网：

Vant Weapp - 轻量、可靠的小程序 UI 组件库轻量、可靠的小程序 UI 组件库https://youzan.github.io/vant-weapp/#/quickstart

具体使用方法：

uniapp小程序的创建方法：

1、使用hbuilder x的界面：文件=》新建=》项目

2、选择默认模板即可：填写项目名称=》选择目录=》默认模板=》创建

uniapp小程序安装好之后。就可以运行了：

3、运行：

然后就可以安装vant-weapp了：

安装vant-weapp：（很多坑，必须按照步骤来，否则容易踩坑）

1、在微信开发者工具里面，在项目结构目录的空白处点击右键打开命令行工具

（打开之后会发现。这里的路径不是项目的根目录。是的！就在这里操作即可。如果自作聪明去根目录操作就是错的！）

如图：

2、 npm init -y 在文件夹下生成默认的package.json文件

这一步是必须的。必须要有package.json文件才行

npm init -y

3、安装vant-weapp

npm i @vant/weapp -S --production

4、修改 project.config.json

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

5、构建 npm 包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

6、引入vant-weapp的组件

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

7、使用组件：

把按钮组件复制到页面上去。

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

就能看到效果：

uniapp微信小程序使用vant-weapp详细操作步骤（各种坑）相关推荐

微信小程序导入Vant Weapp组件库
超详细!微信小程序导入Vant Weapp组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
小程序安装Vant Weapp详细步骤,下载和npm安装版
小程序安装Vant Weapp详细步骤使用npm下载 1.新建项目并初始化项目 2.下载Vant Weapp 3.修改 app.json 4.构建 npm 包 5.引入组件下载方式 1. npm下 ...
微信小程序中Vant Weapp的引用与使用
微信小程序中Vant Weapp的引用与使用 1.安装方式 # 通过 npm 安装 npm i @vant/weapp -S --production# 通过 yarn 安装 yarn add @va ...
微信小程序使用vant weapp报错
微信小程序使用vant weapp报错错误一:构建错误错误二:["usingComponents"]["van-button"] 未找到我的安装流程 1. ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
微信小程序接入Vant Weapp
步骤一通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -S --production 步骤二修改 app.json 将 app.json 中的 "styl ...
【微信小程序】Vant Weapp
微信小程序中使用Vant Weapp 进入项目,使用 npm init 初始化项目,生成package.json. 安装vant weapp方式通过 npm 安装 npm i @vant/weapp ...
Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端或者直接Ctrl+Shift+C直接打开 2.打开 ...