微信小程序中vant/weapp安装，初始化，及使用

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

Vant Weapp官网：https://youzan.github.io/vant-weapp

安装步骤：

1、需要使用 npm 安装Vant Weapp，npm 集成在 Node.js 中的，安装参见文章：安装 Node.js 使用 npm

2、在微信开发者工具中，右键项目中的miniprogram目录，选择在终端中打开，运行npm init 生成package.json文件

npm init

3、通过 npm 安装 Vant Weapp

npm i @vant/weapp -S --production

4、点击微信开发者工具最右边的详情按钮，设置中勾选 “使用 npm 模块”

5、在微信开发者工具中，选择菜单 “工具”-->“构建 npm”，会在miniprogram目录下面生成 miniprogram_npm目录，里面就是Vant Weapp 的组件库

6、使用方法示例
在app.json或index.json中引入组件。

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

在index.wxml 文件输入：

<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

完成初始化和使用

微信小程序中vant/weapp安装，初始化，及使用相关推荐

微信小程序中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组件库 Vant Wepp组件库轻量.可靠,同时组件样式丰富美观,容易上手,我们可以引入该组件库来实现小程序的相关界面样式. Vant Weapp组件库官方文 ...
微信小程序升级Vant Weapp版本
微信小程序升级Vant Weapp版本大家好,今天我们来学习一下微信小程序如何升级Vant Weapp版本,好好看,好好学,超详细的第一步首先你要有一个构建npm的项目还不知道构建npm的小伙 ...
【微信小程序】Vant Weapp
微信小程序中使用Vant Weapp 进入项目,使用 npm init 初始化项目,生成package.json. 安装vant weapp方式通过 npm 安装 npm i @vant/weapp ...
微信小程序使用vant weapp的van-field，输入有内容时，表单校验数据一直为空的问题
在微信小程序中使用了van-field来输入用户的手机号码,并且实现实时校验手机号码的正确性,具体表现如下主要原因是不支持数据双向绑定:当输入内容发生改变得时候,需要通过bind:change来将数 ...
Day267/300 Mac微信小程序引入@vant/weapp样式不生效问题
(一)需求微信小程序想使用Vant Weapp ,按照官网的步骤安装成功,但是就是不生效--是在真机预览的时候生效,但是在开发工具上的时候不生效. 折腾了一天多,终于解决了,分享给大家. (二)官网 ...
微信小程序引用vant Weapp
vant-weapp官网https://youzan.github.io/vant-weapp/#/quickstarthttps://youzan.github.io/vant-weapp/#/qu ...
微信小程序引入vant Weapp
1.微信小程序的内置终端用不了,只能使用外部终端点击微信开发者工具>视图>命令面板(或者Ctrl+Shift+Alt+P)打开外部终端或者直接Ctrl+Shift+C直接打开 2.打开 ...

微信小程序中vant/weapp安装，初始化，及使用

微信小程序中vant/weapp安装，初始化，及使用相关推荐

最新文章

热门文章