详解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 相关文章推荐
教你如何使用node.js制作代理服务器
Nov 26 Javascript
无刷新上传文件并返回自定义值
Jun 11 Javascript
js自定义回调函数
Dec 13 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
AngularJS教程之环境设置
Aug 16 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
jQuery Ajax实现跨域请求
Jan 21 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue中使用ueditor富文本编辑器
Feb 08 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 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
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
深入php处理整数函数的详解
2013/06/09 PHP
php实现的DateDiff和DateAdd时间函数代码分享
2014/08/16 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
谈谈php对接芝麻信用踩的坑
2016/12/01 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
jQuery的deferred对象使用详解
2011/08/20 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
python单链表实现代码实例
2013/11/21 Python
python 删除非空文件夹的实例
2018/04/26 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
10款最好的Python开发编辑器
2019/07/03 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
解决Python3下map函数的显示问题
2019/12/04 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python collections模块的使用
2020/10/16 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
高中生评语大全
2014/04/25 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
设计师求职信
2014/07/01 职场文书
浅析python中特殊文件和特殊函数
2022/02/24 Python