轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用

简介: 轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用

安装


  1. windows下载安装npm
    https://nodejs.org/en/
  2. 需要先在miniprogram文件里初始化package.json
npm init -y
  1. 在miniprogram文件里下载npm资源包
  1. 接下来就需要在微信开发者工具里面进行配置
  2. 点击工具 构建npm

  3. 修改 app.json
    将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
  4. 引入组件

以 Button 组件为例,只需要在app.json或index.json中配置 Button 对应的路径即可。

// 通过 npm 安装

// app.json
"usingComponents": {
  "van-button": "/miniprogram_npm/@vant/weapp/button/index"
}


使用组件


引入组件后,可以在 wxml 中直接使用组件

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

官方文档:https://vant-contrib.gitee.io/vant-weapp/#/quickstart

目录
相关文章
|
18天前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
16 0
|
1月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
39 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
5天前
|
小程序 开发者 Windows
安装VantWeapp开发微信小程序
安装VantWeapp开发微信小程序
15 0
|
1月前
|
JavaScript Java 测试技术
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
23 1
|
1月前
|
JavaScript
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
这篇文章介绍了在项目中安装和配置Nuxt UI以及TypeScript的步骤。作者在前言中提到考虑了AntDesignVue和Element-Plus,但最终选择了NuxtUI,因为它更适合年轻化的项目,并且与Nuxt兼容。安装Nuxt UI需要执行一系列命令,同时会自动安装一些相关模块。然后,可以在Nuxt应用中使用Nuxt UI的所有组件和可组合函数。此外,还介绍了如何添加图标库和配置TypeScript。
Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
|
1月前
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之四:Naive UI 组件库的安装和使用
49 1
|
1月前
|
小程序 开发者
注册小程序账号&安装开发者工具
该内容是一份指南,描述了如何注册并激活微信小程序账号的步骤。首先,访问网址后点击“前往注册”。接着,按照提示依次填写个人信息。完成注册后,检查邮件进行激活。选择主体类型为个人,并填写相关主体信息。之后,使用微信扫描二维码验证。成功后,获取小程序的App ID并保存。下载并安装微信开发者工具,扫码登录。最后,通过开发者工具创建新的小程序项目,填写项目信息,包括之前获取的App ID,选择不使用云服务,然后点击新建以开始项目。
26 0
|
10天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的小程序疫苗预约网站系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧农业小程序的详细设计和实现(源码+lw+部署文档+讲解等)
20 6
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
19 3