微信小程序中使用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 相关文章推荐
理解 JavaScript 预解析
Oct 25 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
动态加载jQuery的两种方法实例分析
Jul 17 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP里的中文变量说明
2011/07/23 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
JavaScript 学习点滴记录
2009/04/24 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
js断点调试经验分享
2017/12/08 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python计算最小优先级队列代码分享
2013/12/18 Python
python图像处理之镜像实现方法
2015/05/30 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python 类的继承实例详解
2017/03/25 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
CSS3弹性盒模型开发笔记(一)
2016/04/26 HTML / CSS
请介绍一下WSDL的文档结构
2013/03/17 面试题
财务部副经理岗位职责
2014/03/14 职场文书
公司介绍信范文
2015/01/31 职场文书
个人维稳承诺书
2015/05/04 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript