微信小程序引入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 相关文章推荐
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JavaScript+H5实现微信摇一摇功能
May 23 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 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
当海贼王变成JOJO风
2020/03/02 日漫
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
浅析return false的正确使用
2013/11/04 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
2015/09/09 Javascript
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
2016/07/26 NodeJs
浅谈es6语法 (Proxy和Reflect的对比)
2017/10/24 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
关于JS模块化的知识点分享
2019/10/16 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Python可跨平台实现获取按键的方法
2015/03/05 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python+django+rest框架配置创建方法
2019/08/31 Python
简单了解python中的与或非运算
2019/09/18 Python
Python全面分析系统的时域特性和频率域特性
2020/02/26 Python
Python实现仿射密码的思路详解
2020/04/23 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
个人自我评价分享
2013/12/20 职场文书
如何写好升职自荐信
2014/01/06 职场文书
python实现求纯色彩图像的边框
2021/04/08 Python
Python 数据可视化之Seaborn详解
2021/11/02 Python
《艾尔登法环》Boss腐烂树灵很有可能是《黑暗之魂3》的一个废案
2022/04/11 其他游戏