uni-app中vant-Weapp组件库的使用

【代码】uniapp中使用vant-weapp。

2.创建 uniapp 项目,在根目录下新建 一个文件夹wxcomponents ，将下载好的压缩包中的 dist 文件夹放到 wxcomponents 里, 推荐将 dist 重命名为 vant,方式二：通过npm install 方式引入 npm i @vant/weapp -S --production。下载对应版本的压缩包,将文件解压后备用,确保下载的压缩包里有dist 文件夹。4.在pages.json页面将vant的组件注册到对应的页面。一、下载vant源码。

将npm或刚下载的文件vant-weapp中的dist文件夹复制到wxcomponents文件夹中，并将dist文件夹重命名为vant。安装完毕后会出现node_modules目录，及vant的weapp文件夹。右键单击项目目录，使用命令行窗口打开所在目录，在终端输入命令，安装vant。方法二：通过GitHub下载vant-weapp，完成后解压。方法一：如果电脑已经安装了node，可以通过npm安装。在项目根目录下创建wxcomponents文件夹。在相应页面中使用vant组件。

在我们刚才新建的wxcomponents 目录下新建一个 @vant 的文件夹，建立目录方法就和步骤三一样，只不过这一次我们要在 wxcomponents 目录下建立 子目录 @vant。再多提一嘴，vant组件是配合原生小程序使用的，所以有些地方，比如data数据渲染，我们不能直接照抄，一般用vue的思路就可以解决啦。那我们这样创建文件夹，和它嵌套的路径一样，是不是后面使用复制vant 提供的路径就OK了？填写项目名称，选择模板，vue技术栈，…最后说明一下前面文件夹的命名方式的由来。

1.在根目录下创建wxcomponents 2.引入vant weapp 1.我们到https://github.com/youzan/vant-weapp下载最新的压缩包 2.解压，将里面的dist文件夹复制粘贴到wxcomponents目录下,并改名为vant 3. 在根目录下App.vue中引入UI样式index.wxss，如下图 @import "/wxcomponents/vant/common/index.wxss"; 4. 在pages.json页面将vant的组件.

onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...

2022年11月7号亲测有效，我也在引入vant时出现了很多问题，在引入时个人感觉uview比vant好引入

原生微信小程序使用 找到app.json文件，删除 “style”: “v2”, 这个特性。 在开发工具右上角详情–本地设置-- 勾选 使用npm模板 在调试器栏中–终端–点击 新建终端 输入命令 npm init (防止小程序不自动创建package.json)，出现需要输入的时候，回车10下 输入 npm i @vant/weapp -S --production 等待完成后就多了一个node_modules的文件 点击开发工具最上方的 工具–构建npm 完成后就多出了一个miniprogram_np

uniapp 使用 Vant Weapp 组件（亲测有效) 1. 下载 网址：https://github.com/youzan/vant-weapp 下载压缩包并解压 2. 置入 (1).在项目中创建一个文件夹 wxcomponents，与pages文件夹同级 (2).第一步解压后的文件目录下有一个dist文件夹 ，重名为vant，把他放置到我们创建的wxcomponents文件夹中 3. 引入 在需要用到的页面中用 import 引入并挂载到components中；注（这里用search组件演示）

Uniapp 是基于 Vue.js 的开发框架，通过一套代码可以同时发布到多个平台的应用框架。而 Vant 是针对移动端 Vue.js 的组件库。通过这样的组合，我们可以快速构建出一个跨平台的移动应用。Vant 已经支持多种小程序和 H5 平台，也对 Uniapp 实现了完美的支持。我们可以使用 Vant 提供的丰富的组件和功能，来快速开发一个漂亮、易用的移动应用。

今天写小程序页面的时候用到了 vant-steps ， 遇到了使用上的两个问题，在这里记录一下 问题一， 引入 vant -steps 之后， 最后一个节点的显示问题 不知道 别人的电脑会不会出现这个问题， 反正我的是有， 不影响， 但不爽，在开发者工具中看了半天， 就是那个图标跑到上面去了， 那我们使用 transform：translate 把它移下来不就好了 于是解决办法就出来了， 找到相对应的 选择器 .van-step--horizontal:last-child .van-step__circ

1.先在微信开发者工具中打开项目的终端：cmd cd F:\项目开发\微信小程序\你项目路劲 2.然后初始化一个package.json文件：输入命令：npm init 一路回车 3.在小程序工程的根目录下执行： npm i vant-weapp -S --production 2.第二步： 保证当前你的微信开发者工具是最新版本，然后点击执行“构建npm“ 工具--构建NPM ...

要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项目之中要用到的一些需求，在这里都可以找到并且直接使用，就很nice了。使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~）进入项目的根目录底下，注意，一定要进入根目录哦，使用cd …

在需要使用组件的页面的 json 文件的"usingComponents" (使用组件)内加入想要使用的组件即可。点击上方导航栏 - - - 工具 - - - 构建 npm。然后右上角 - - - 详情里的使用 npm 模块勾上。在 main.js 文件中添加上。在其他 vue 文件可以直接使用。在其他 vue 文件可以直接使用。然后在 wxml 里就可以使用了。在 app.json 文件加入。然后在 wxml 直接使用即可。直接在 vue 文件里添加。在 main.js 中添加。然后就可以引入组件了。

之前用vue用的比较习惯，比较喜欢里面的组件式开发，能少写一些复用的代码，于是尝试一下美团的mpvue来开发小程序。 官网：http://mpvue.com/mpvue/quickstart.html 部署教程官网里面的就可以了。 然后，mpvue只是提供了代码编辑的框架而已，里面的组件之类需要第三方的组件库，我看到基本上用的vant的比较多，于是也打算尝试一下。 vant官网：https://youzan.github.io/vant/#/zh-CN/quickstart "mpvue": "^