uni-app—vscode—微信小程序使用vant（图文）

最新推荐文章于 2024-06-21 12:11:27 发布
最新推荐文章于 2024-06-21 12:11:27 发布
阅读量1.3k 收藏 1
点赞数
分类专栏： uni-app 文章标签： 小程序使用vant
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poppy_LYT/article/details/106808093
版权
本文详细介绍了如何在uni-app中使用VSCode配合微信小程序，集成 vant 组件库。步骤包括创建文件夹、下载 vant 库、在 App.vue 和 pages.json 中引入样式和组件，以及重新运行和实际使用 vant 的 button 组件。
摘要由CSDN通过智能技术生成

1、创建文件夹

src下创建wxcomponents文件夹
wxcomponents文件夹下再创建vant文件夹
在这里插入图片描述

2、下载

在https://github.com/youzan/vant-weapp下载最新zip
下载完成后解压，将解压后的文件中的dist文件夹放入刚刚创建好的vant文件夹下
在这里插入图片描述

3、在App.vue中引入样式

在这里插入图片描述

@import "/wxcomponents/vant/dist/common/index.wxss"

4、在pages.json文件中引入组件

在这里插入图片描述

最低0.47元/天 解锁文章
Poppy_LYT
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vant-weapp-uniapp:vant-weapp的uniapp演示（仅微信小工具）
05-09
VantUI Uniapp 示例 本示例原本是从vant官方发布的微信演示示例转换而来,支持微信小程序（H5不支持！！）。 vant-weapp版本为1.6.7. vant weapp的组件库，都在工程的wxcomponents目录下。pages目录下是各个示例页面。 图片上传服务 提供了图片Nodejs服务 ，代码路径为\src\node-image-upload-server 安装npm包 npm install 运行服务 node app 感谢 本示例参考了依据官网增加了新控件的使用示例。 :fire: 更新日志 1.2.2(2021-01-30) 升级版本至1.6.7，增加新功能示例（自定义属性示例），优化原有功能。 1.1.0(2020-04-30) 升级版本至1.2.1，增加新功能示例，优化原有功能。 1.0.0(2020-02-19) 支持H5模式编译。
vant开发微信小程序安装以及简单使用教程
NanChen的博客
11-30 1454
vant安装微信小程序教程
[保姆级教程]在uniapp中使用vant框架
最新发布
肥晨开发的学习之路
06-21 3438
和Vue.js的版本都在不断更新，因此上述步骤可能会随着版本的更新而有所变化。但是，如果你想要全局引入某个组件（这通常不推荐，因为它会增加你的包大小），你可以在。可能已经内置了类似的工具，或者你可能需要根据你的构建工具进行特定的配置。来按需加载组件，那么你可以不用全局引入样式，而是在每个组件中单独引入。然后，在你的模板部分，你可以像使用普通的Vue组件一样使用。的组件时，Babel会自动为你处理样式和组件的按需引入。根据参考文章和Vant的官方文档，在你的Vue 2.x项目的根目录下，使用npm来安装。
uniapp引入 vant
weixin_37391237的博客
03-15 1万+
2.创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,方式二：通过npm install 方式引入 npm i @vant/weapp -S --production。下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹。4.在pages.json页面将vant的组件注册到对应的页面。一、下载vant源码。
微信小程序--引入第三方框架 Vant (配合vsCode)
叫我官人
06-29 1310
1.新建小程序项目文件 2.初始化生成项目结构如下，同时我们手动在根目录下新建文件夹miniprogram(为引入vant 做准备) 3. 鼠标右键miniprogram文件夹，选在在终端打开 输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在miniprogram文件夹下，生成package.json文件。 3.安装依赖 通过npm安装,执行以下命令 1：npm install --production 2:npm i...
在路径“wxcomponents/vant weapp/dist/****/index”中找不到组件
weixin_65565362的博客
11-20 3826
WASubContext.js?t=wechat&s=1668912774528&v=2.27.1:1 Component is not found in path "wxcomponents/vant-weapp/dist/field/index" (using by "pages/Login/Login")(env: Windows,mp,1.06.2210310; lib: 2.27.1)
使用vscode编写uniapp并引入vant组件
qq_29159157的博客
05-07 1545
使用vscode编写uniapp并引入vant组件 前情 1. 项目初始化 2. 引入vant组件库 3. 在App.vue中引入样式 4. 在pages.json文件中引入组件 5. 使用pages/index/index.vue 6. 重启项目 7.最后 使用vscode编写uniapp并引入vant组件 前情 入门前端以来就是用的vscode,难以再接纳HBuilderX,更别说微信开发者工具了,甚至使用vscode成一种执念.而且uniapp语法是基于vue的想用vue直接编译成unia.
uniapp项目引用vant weapp组件库及icon字体图标库报错
qq_53841687的博客
09-23 3349
在HbuilderX里点击文件，新建项目，自定义项目名称选择默认模板。
微信小程序使用 vant Dialog组件的正确方式
10-15
Vant包含了近50个经过实际业务检验的组件，例如 Dialog 组件，它在微信小程序中的使用方法是本文的重点。 首先，Vant 的 Dialog 组件是一个弹窗对话框，它可以用于显示警告、确认或输入等操作。在微信小程序中使用 ...
wxa-vscode微信小程序开发助手
06-19
微信小程序开发助手。开箱即用，安装完毕你将获得： 代码自动填充、格式化，语法高亮、检查（包括wxml、wxs文件），代码片段提示，单文件组件支持。 极速上手 无额外的学习门槛，可以完全使用原生的小程序语法开发。...
微信小程序引入Vant组件库过程解析
11-30
微信小程序是一种轻量级的应用开发平台，允许开发者创建无需下载安装即可使用的应用。Vant Weapp 是一个专为微信小程序设计的组件库，它提供了丰富的 UI 组件，可以帮助开发者快速构建美观、统一的用户界面。Vant ...
微信小程序引入vant-weapp
01-03
1 在桌面新建demo文件夹，然后打开微信开发者工具，选择demo文件夹新建小程序项目 2 用cmd或者powershell找到该项目目录，在该目录下进行安装vant-weapp 步骤一 通过 npm 安装 # 通过 npm 安装 npm i @vant/weapp -...
微信小程序使用Vant Weapp组件库的方法步骤
12-11
微信小程序是一种轻量级的应用开发平台，允许开发者创建无需安装即可使用的应用。Vant Weapp 是一个专为微信小程序设计的组件库，它基于 vant 的 UI 设计语言，提供了丰富的 UI 组件，可以帮助开发者快速构建出美观...
在uniapp中使用VantUI组件库(微信版)
weixin_48888726的博客
11-08 1979
【代码】在uniapp中使用VantUI组件库(微信版)
vant_移动端组件库使用方法
分享程序相关知识
05-09 862
前端做项目时，为了节约时间，有时可以引用一些现成的组件，vant是一个移动端组件库，包括vue2、vue3、微信小程序，三个版本。
uni-app下使用vant组件
wangmj518的专栏
03-12 2万+
1. 创建uni-app 下载打开HbuilderX,注意这里下载app开发版的。然后创建新项目，创建的时候选择uni-app默认模板 2. 下载vant组件 vant的GitHub下载地址下载完成后解压，然后在项目更目录下创建文件夹wxcomponents，注意这里的wxcomponents目录级别和pages在同一级别，然后再该目录下创建vant目录。回到刚才解压的vant目录，找到dist文件夹，把它复制到vant目录下 3. 引用vant组件 3.1 首先在app.vue文件内添加
uni-app项目中引入Vant UI组件库（完美避坑！！！）纯净版
热门推荐
Wzmlzrr的博客
03-19 3万+
uni-app项目中引入Vant UI组件库（纯净版--无uni-ui）
uni-app中vant-Weapp组件库的使用
qq_60976312的博客
02-03 1653
uni-app中vant-Weapp组件库的使用
uniapp开发小程序引入vant-weapp流程
m0_58293192的博客
10-14 1964
uniapp开发小程序引入vant-weapp流程
uni-app小程序使用vant组件
09-13
uni-app是一个跨平台的开发框架，可以用于开发小程序、H5、App等多端应用。而vant是一个基于Vue.js的移动端组件库，提供了丰富的UI组件和交互效果。 要在uni-app小程序中使用vant组件，可以按照以下步骤操作： 1. 在uni-app项目中安装vant组件库。可以通过命令行执行以下指令安装： ``` npm install vant ``` 2. 在uni-app项目的`main.js`文件中引入vant组件库： ```javascript import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); ``` 3. 在需要使用vant组件的页面中，按需引入所需的组件。例如，在某个页面的`<script>`标签中可以这样引入Button组件： ```javascript import { Button } from 'vant'; export default { components: { [Button.name]: Button } } ``` 4. 在页面的模板中，使用引入的vant组件即可。例如，可以在模板中使用Button组件： ```html <template> <div> <van-button type="primary">按钮</van-button> </div> </template> ``` 通过以上步骤，你就可以在uni-app小程序中使用vant组件了。当然，除了Button组件外，你还可以按照同样的方式引入和使用vant提供的其他组件。希望对你有帮助！如有更多问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值