微信小程序中使用vant框架的具体步骤


Posted in Javascript onFebruary 18, 2022

1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧。

2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。

3.我们废话不多说,直接进入今天的主题。我们该如何在微信小程序中去使用vant组件库呢!

首先

我们先打开vant weapp网站

大家打开网站后呢,点击快速上手。上面就有步骤教你如何在小程序中使用vant组件库。

下面呢就给大家介绍一下我是如何去安装使用vant UI组件库的。

1.打开我们小程序的项目目录,然后打开文件所在的位置。

微信小程序中使用vant框架的具体步骤

2.初始化项目文件

这里呢我通过 cmd 窗口初始化

微信小程序中使用vant框架的具体步骤

3.输入初始化项目的命令 

npm init

此时你会发现你的目录多出了package.json文件

微信小程序中使用vant框架的具体步骤

4.安装依赖 

4.1 通过 npm 安装vant/weapp

npm i @vant/weapp -S --production

4.2 安装 miniprogram

npm i miniprogram-sm-crypto --production

安装完毕后,你会发现你的目录中又多些文件。

微信小程序中使用vant框架的具体步骤

4.3 修改 app.json

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

4.4 修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}
4.5 构建 npm 我们点击左上角的工具栏

微信小程序中使用vant框架的具体步骤

 构建成功后会出现下面的画面

微信小程序中使用vant框架的具体步骤

 4.6然后点击右上角的详情---本地设置----使用npm模块

微信小程序中使用vant框架的具体步骤

5.使用组件

我这里在全局里面注册一个按钮,然后使用它。先去app.json中注册

微信小程序中使用vant框架的具体步骤

 这里我随便找一个页面用一下这个按钮组件。

微信小程序中使用vant框架的具体步骤

大家可以看到我使用成功了。 

到此这篇关于微信小程序中使用vant框架的具体步骤的文章就介绍到这了,更多相关小程序使用vant框架内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
通过Javascript创建一个选择文件的对话框代码
Jun 16 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
15条JavaScript最佳实践小结
Aug 09 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
Vue elementUI表单嵌套表格并对每行进行校验详解
Feb 18 #Vue.js
微信小程序中wxs文件的一些妙用分享
Feb 18 #Javascript
vue项目支付功能代码详解
Feb 18 #Vue.js
JavaScript的Set数据结构详解
Feb 18 #Javascript
JS封装cavans多种滤镜组件
HTML+JS实现在线朗读器
Feb 15 #Javascript
js中Map和Set的用法及区别实例详解
Feb 15 #Javascript
You might like
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP设置进度条的方法
2015/07/08 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS教程:window.location使用方法的区别介绍
2013/10/04 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
Django admin美化插件suit使用示例
2017/12/12 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
函授毕业自我鉴定
2013/12/19 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
领导欢迎词范文
2015/01/26 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书
2016党员干部反腐倡廉心得体会
2016/01/13 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
centos8安装MongoDB的详细过程
2021/10/24 MongoDB