详解VUE项目中安装和使用vant组件


Posted in Javascript onApril 28, 2019

Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。

特性

  1. 50+ 个经过有赞线上业务检验的组件
  2. 单元测试覆盖率超过 90%
  3. 完善的中英文文档和示例
  4. 支持 babel-plugin-import
  5. 支持 TypeScript
  6. 支持 SSR

组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro

1、创建VUE项目之后进入项目目录运行安装命令:

npm i vant -S

2、安装 babel-plugin-import 插件,babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

3、在.babelrc文件中配置plugins(插件)

"plugins": [
  "transform-vue-jsx", 
  "transform-runtime",
  ["import", [{ "libraryName": "vant", "style": true }]]
 ],

4、按需要引入vant组件,比如我们要在HelloWord.vue组件中使用 Loading 组件,我们可以先 在组件中引入

<script>
import { Loading } from 'vant'
export default {
 components: {
  [Loading.name]: Loading
 }
}
</script>

然后在页面中加入组件代码

<template>
  <div>
   <van-loading color="black" />
   <van-loading color="white" />
   <van-loading type="spinner" color="black" />
   <van-loading type="spinner" color="white" />
 </div>
</template>

这样就可以看到效果了

以上所述是小编给大家介绍的VUE安装和使用vant组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript设计模式之工厂方法模式介绍
Dec 28 Javascript
原生js实现日期联动
Jan 12 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
jQuery中通过ajax的get()函数读取页面的方法
Feb 29 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript适配器模式详解
Oct 19 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
ES6 Generator函数的应用实例分析
Jun 26 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
You might like
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
ThinkPHP框架设计及扩展详解
2014/11/25 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
JS的数组的扩展实例代码
2008/07/09 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
跟我学习javascript的浮点数精度
2015/11/16 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python使用ctypes模块调用windowsapi获取系统版本示例
2014/04/17 Python
python端口扫描系统实现方法
2014/11/19 Python
用python 制作图片转pdf工具
2015/01/30 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
详解Python中使用base64模块来处理base64编码的方法
2016/07/01 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
幼儿园亲子活动总结
2014/04/26 职场文书