微信小程序引入VANT组件的方法步骤


Posted in Javascript onSeptember 19, 2019

1.右键项目名称->在终端中打开

微信小程序引入VANT组件的方法步骤

2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok。

之后项目中会出现 project.config.json

微信小程序引入VANT组件的方法步骤

内容为当前项目的配置信息以及依赖包的管理。

3.安装vant依赖包(在终端输入)

npm i vant-weapp -S --production

微信小程序引入VANT组件的方法步骤

4.进入小程序开发工具,选择左上角 工具->构建npm

微信小程序引入VANT组件的方法步骤

完成之后项目里会多出依赖包

微信小程序引入VANT组件的方法步骤

5.点击右上角详情并勾选使用npm模块。

微信小程序引入VANT组件的方法步骤

6.选择要在哪个pages里使用该组件

这里以pages下的movie举例,写一个简单的按钮。

如图 在对应的json文件中引入vant的button

微信小程序引入VANT组件的方法步骤

7.在对应wxml文件,写如下代码:

<van-button type="default">默认按钮</van-button>
<van-button type="danger">主要按钮</van-button>

微信小程序引入VANT组件的方法步骤

效果图如下:

微信小程序引入VANT组件的方法步骤

注意:若样式没出来,重复步骤4。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
JQuery UI皮肤定制
Jul 27 Javascript
15 个 JavaScript Web UI 库
May 19 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
Sep 02 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
ES6 迭代器与可迭代对象的实现
Feb 11 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
对layui中table组件工具栏的使用详解
Sep 19 #Javascript
layui自定义工具栏的方法
Sep 19 #Javascript
Node 代理访问的实现
Sep 19 #Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 #Javascript
微信小程序进入广告实现代码实例
Sep 19 #Javascript
解决layui数据表格Date日期格式的回显Object的问题
Sep 19 #Javascript
You might like
20个2014年最优秀的PHP框架回顾
2014/10/22 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python文本特征抽取与向量化算法学习
2017/12/22 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Pycharm Git 设置方法
2020/09/15 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
物流仓储计划书
2014/01/10 职场文书
甲午风云观后感
2015/06/02 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL