微信小程序引入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 相关文章推荐
function foo的原型与prototype属性解惑
Nov 19 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
理解JavaScript中Promise的使用
Jan 18 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
Feb 17 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 Javascript
JavaScript ES6的函数拓展
Jan 18 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
收音机指标测试方法及仪器
2021/03/01 无线电
php生成RSS订阅的方法
2015/02/13 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
关于取不到由location.href提交而来的上级页面地址的解决办法
2009/07/30 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
常见表单重复提交问题整理及解决方法
2013/11/13 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
vue实现计步器功能
2019/11/01 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
Python 文件和输入输出小结
2013/10/09 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
什么是Python变量作用域
2020/06/03 Python
Python Merge函数原理及用法解析
2020/09/16 Python
CSS3 特效范例整理
2011/08/22 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
AJax面试题
2014/11/25 面试题
焊接专业毕业生求职信
2013/10/01 职场文书
党员个人思想汇报
2013/12/28 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
安全保证书
2015/01/16 职场文书
爱心捐助活动总结
2015/05/09 职场文书
教师节校长致辞
2015/07/31 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书