微信小程序引入Vant组件库过程解析


Posted in Javascript onAugust 06, 2019

前期准备

Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro

1.先在微信开发者工具中打开项目的终端:

然后初始化一个package.json文件:输入命令:npm init

然后一路回车默认的即可:

npm init

微信小程序引入Vant组件库过程解析

微信小程序引入Vant组件库过程解析

项目就回产生一个package.json文件:

{
 "name": "miniprogram",
 "version": "1.0.0",
 "description": "",
 "main": "app.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC"
}

2.接着在vant组件库的官网上找到安装语句:

npm i vant-weapp -S --production,在终端输入安装命令,点击回车:

微信小程序引入Vant组件库过程解析

npm i vant-weapp -S --production

微信小程序引入Vant组件库过程解析

3.构建npm:

在微信开发者工具的菜单栏中找到工具栏的选项“构建npm”,等待构建完成

微信小程序引入Vant组件库过程解析

4.引用和使用vant组件:

(关于如何引用和使用组件可以参考官方文档噢,很齐全)

以引用button按钮为例,官网文档中都写的特别详细了:

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

Javascript 相关文章推荐
JavaScript 指导方针
Apr 05 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JavaScript调试技巧之console.log()详解
Mar 19 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 #Javascript
You might like
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
php实现的SESSION类
2014/12/02 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
Python创建日历实例
2014/08/21 Python
基于Python实现文件大小输出
2016/01/11 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
python 文件查找及内容匹配方法
2018/10/25 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
后备干部考察材料
2014/02/12 职场文书
教师读书活动总结
2014/05/07 职场文书
自查自纠工作情况报告
2014/10/29 职场文书
2014年社区综治工作总结
2014/11/17 职场文书
二年级语文下册复习计划
2015/01/19 职场文书
产品质量保证书范本
2015/02/27 职场文书
部队个人年终总结
2015/03/02 职场文书
公积金贷款承诺书
2015/04/30 职场文书
党内外群众意见范文
2015/06/02 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书