详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。
特性
- 50+ 个经过有赞线上业务检验的组件
- 单元测试覆盖率超过 90%
- 完善的中英文文档和示例
- 支持babel-plugin-import
- 支持 TypeScript
- 支持 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组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
mpvue+vant app搭建微信小程序的方法步骤
mpvue使用 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev vant使用 yarn add vant # 将node_modules下的vant-weapp下的dist目录复制到s
-
详解vantUI框架在vue项目中的应用踩坑
1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc
-
Vant的安装和配合引入Vue.js项目里的方法步骤
1.安装vant npm i vant -S:这是简写形式. npm install vant --save:这是完整写法. 如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装. npm install vant --save --registry=https://registry.npm.taobao.org 淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成 2.1使用babel-plugin-import(推荐) babel-plugin-impo
-
详解VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl
-
详解Vue 项目中的几个实用组件(ts)
前言 这段时间使用 ts 和 vue 做了一个项目,项目从 0 开始搭建,在建设和优化的同时,实现了很多自己的想法,有那么一两个组件可能在我本人看来有意义,所以从头回顾一下当初的想法,同样也可以做到一个记录的作用.如果还没有使用过 ts 的同学可以通过使用 Vue Cli3 + TypeScript + Vuex + Jest 构建 todoList这边文章开始你的 ts 之旅,后续代码也是在 todoList 的结构上改进的 vue 路由中的懒加载 你真的用好了路由的懒加载吗? 在 2.x 的
-
详解Vue项目中实现锚点定位
背景 今天在开发限时练-提分加项目的时候,有一个需要锚点定位的需求,而在Vue项目中,使用传统的在a标签的href属性中写id的方法无效,会导致浏览器的地址改变从而跳转到其他页面. 解决 最终参考vue2.0中怎么做锚点定位改问题下的回答实现了效果. <template> <div class="score-preview-container"> <div class="content-box"> <div class=&q
-
详解vue项目中调用百度地图API使用方法
步骤一:申请百度地图密钥: JavaScript API v1.4以及以前的版本无序申请秘钥(ak),自v1.5版本开始需要先申请秘钥(ak),才可以使用,如需获取更高的配额,需要申请 认证企业用户.百度地图API 链接地址:http://lbsyun.baidu.com/apiconsole/key 步骤二:在index.html中添加百度地图JavaScript API接口: <script src="http://api.map.baidu.com/api?v=1.4"
-
详解vue项目中使用vuedraggable
最近在学习一个可视化搭建的项目,里面用的拖拽就是draggable.js.看了几个中文的文档,有很多坑,可能是没有及时更新的原因. VUe 建议去看vuedraggable的官方文档,只不过是英文的.官方文档:https://github.com/SortableJS/Vue.Draggable: 由于vue3已经是默认版本了,所以vuedraggable也对应vue2.0和3.0有各自的版本,直接使用基本命令安装: npm install vuedraggable --save 会默认安装2.
-
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chu
-
详解vue项目中如何引入全局sass/less变量、function、mixin
让我们考虑下场景:当使用rem/vw开发移动端的时候,你定义了一个px转rem的函数,或者是网站配色的全局变量等,然后到工程里为每个vue文件或者组件@import 'publicfilename.scss',那得重复做这样的工作很多很多...次,万一这些公用文件目录路径变怎么办呢,哭都来不及,想想都觉得恐怖呀! 接下来拯救我们的神器就要登场了---sass-resources-loader,它可以省去重复性的引入,还支持less,postcss等,具体用法如下: npm install -d
-
详解vue项目中实现图片裁剪功能
演示地址 https://my729.github.io/picture-crop-demo/dist/#/ 前言 vue版本:3.6.3 https://cli.vuejs.org/zh/ cropperjs: 1.5.1 https://github.com/fengyuanchen/cropperjs elementUI https://element.eleme.io/#/zh-CN 使用 cropperjs插件 和 原生canvas 两种方式实现图片裁剪功能 使用cropperjs插件
-
详解vue项目中使用token的身份验证的简单实践
工作原理 前端页面进行登录操作, 将用户名与密码发给服务器; 服务器进行效验, 通过后生成token, 包含信息有密钥, uid, 过期时间, 一些随机算法等 ,然后返回给前端 前端将token保存在本地中, 建议使用localstorage进行保存. 下次对服务器发送请求时, 带上本地存储的token 服务器端,进行对token的验证, 通过的话, 进行相应的增删改查操作, 并将数据返回给前端 为通过则返回错误码, 提示保错信息, 然后跳转到登录页. 具体步骤 所用技术: vuex + ax
-
详解vue项目打包后通过百度的BAE发布到网上的流程
经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己
随机推荐
- 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
- 解决Java原生压缩组件不支持中文文件名乱码的问题
- iOS开发中Date Picker和UITool Bar控件的使用简介
- ADO.NET基础知识汇总
- Javascript的setTimeout()使用闭包特性时需要注意的问题
- BOM系列第一篇之定时器setTimeout和setInterval
- 浅谈JavaScript 执行环境、作用域及垃圾回收
- JS也玩OO继承
- .net下调用sqlserver存储过程的小例子
- php 把数字转换成汉字的代码
- Python中断言Assertion的一些改进方案
- JavaScript实现的圆形浮动标签云效果实例
- javascript中注册和移除事件的4种方式
- 执行Shell脚本的4种方法及区别介绍
- sql注入之新手入门示例详解
- JS实现京东首页之页面顶部、Logo和搜索框功能
- JavaScript 实现鼠标拖动元素实例代码
- 另类调用flash无须激活的方法
- JavaScript CSS 菜单功能代码
- C++抽奖程序实现方法