微信小程序引入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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
Aug 19 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 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
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
php中怎么搜索相关联数组键值及获取之
2013/10/17 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python实现用户管理系统
2018/01/10 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
对django 模型 unique together的示例讲解
2019/08/06 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python str字符串转uuid实例
2020/03/03 Python
Django 用户登陆访问限制实例 @login_required
2020/05/13 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
项目副经理岗位职责
2013/12/30 职场文书
研修第一天随笔感言
2014/02/15 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
Java 死锁解决方案
2022/05/11 Java/Android