详解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 相关文章推荐
返回对象在当前级别中是第几个元素的实现代码
Jan 20 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
jquery分割字符串的方法
Jun 24 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
vue动态设置img的src路径实例
Sep 18 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 jQuery
JavaScript实现打字游戏
Feb 19 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实现用户在线时间统计详解
2011/10/08 PHP
php数组使用规则分析
2015/02/27 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
实例讲解php实现多线程
2019/01/27 PHP
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
javascript日期格式化方法汇总
2015/10/04 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Java多线程编程中ThreadLocal类的用法及深入
2016/06/21 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Python列表切片操作实例总结
2019/02/19 Python
python3实现字符串操作的实例代码
2019/04/16 Python
python3下载抖音视频的完整代码
2019/06/05 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
python常用数据重复项处理方法
2019/11/22 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
大码女装:Ulla Popken
2019/08/06 全球购物
小区门卫值班制度
2014/01/24 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
运动员获奖感言
2014/08/15 职场文书
心术观后感
2015/06/11 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
银行求职信范文
2019/05/13 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js