近期在开发h5端项目,用到vant框架,vant是一款基于Vue的移动UI组件,看了vant的官方文档(https://youzan.github.io/vant/#/zh-CN/)感觉不错,功能比较齐全,可视化页面效果也不错,接下来与大家分享一下vant引入流程。

  1、在项目里面安装 vant:npm install vant -S  也可简写为:npm i vant -S  (接下来  install  将简写为  i )

    安装完成之后就可以在  package.json  的依赖关系(dependencies)中看到  vant  及版本

              

  2、接下来安装  babel-plugin-import ,这是一款babel插件,这样就可以按需引入功能了。

    npm i babel-plugin-import -D

              

  3、然后要在 .babelrc.js 中配置 plugins(插件)

              

              cli3的配置如下:

              

  4、然后按需引入 vant 组件,例如在 index.vue 中使用 Button 组件,就可以直接在 index.vue 中引入

              

  5、如果多个页面组要用到同一个组件(Button),可以再 main.js 中引入

              

  好了,大家可以试试效果怎么样哦!有疑问可以留言或评价,看到消息后我会及时回复的,希望可以帮到大家,谢谢!

Vue项目使用vant框架的更多相关文章

  1. vue项目使用Vant框架Rem适配(postcss-pxtorem、lib-flexible )的安装使用

    1.下载lib-flexible 使用的是vue-cli+webpack,通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main.js中引 ...

  2. vue项目使用前端框架开发,实现滑动效果,若不刷新页面则无法达到预期效果的问题及解决方法

    滑动等效果的初始化时机很重要,在vue项目开发中,需到mounted()钩子函数 (当组件中的DOM结构被渲染好并放到页面中后,会执行这个钩子函数,此时即可初始化滑动效果的js代码). 若组件未挂载到 ...

  3. vue项目使用vux框架配置教程

    吐槽下,这个vux配置教程那..写的实在是坑,也不搞个示例代码...想上天吗???? 正常安装的话...100%报错...以下是正确配置 1.项目里安装vux   npm install vux -- ...

  4. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  5. 解决未安装unit测试和jest的Vue项目运行karma start时的错误

    一.起因 在#单元测试#以karma+mocha+chai 为测试框架的Vue webpack项目(一)文中,说明了是对已有的Vue项目进行测试框架的搭建,并进行测试.但是此项目在利用 vue-cli ...

  6. 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...

  7. 基于vue项目的组件中导入mui框架初始化滑动等效果时需移除严格模式的问题

    基于vue项目的组件中导入mui框架初始化滑动等效果时,控制台报错:Uncaught TypeError: 'caller', 'callee', and 'arguments' properties ...

  8. Vue项目框架

    Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...

  9. Linux下Vue项目搭建karma测试框架

    前提:vue项目已创建,node.js.npm已安装 1.全局安装karma脚手架 karma-cli  [貌似可以不安装] #npm i -g karma-cli 2.转到Vue项目目录,项目下安装 ...

随机推荐

  1. 迭代器使用过程中为什么抛出ConcurrentModificationException

    出现的场景:在迭代器对集合进行遍历的同时,集合本身进行变更操作(add(), remove(), set()). 当正常调用时: import java.util.ArrayList; import ...

  2. MySql笔记(二)

    目录 MySQL笔记(二) 一幅画,一次瞬间的回眸,就在那次画展上,那个眼神,温柔的流转,还是那干净的皮鞋,一尘不染,俊朗的眉宇性感的唇,悄悄走近,牵手一段浪漫 MySQL笔记(二) 13.条件查询 ...

  3. python简易计算器

    import re """ 过程:(最内部的括号->先乘除,替换->整理表达式->加减)->替换 """ def m ...

  4. 认识一下 RabbitMQ

    分布式系统中,如何在各个应用之间高效的进行通信,是系统设计中的一个关键. 使用 消息代理(message broker) 是一个优雅的解决方案. RabbitMQ 就是一个被广泛应用的消息代理,遵循 ...

  5. [题解]CSP2019 Solution - Part B

    \(\text{orz}\) 一波现场 \(\text{A}\) 掉 \(\text{D1T3}\) 的神仙 D2T3 centroid Solution 考虑每个点 \(u\) 作为重心的贡献 假设 ...

  6. 关于 C#和.net 的 发展

    591. C# 1 的 委托 语法 看起来 似乎 并不 太坏 [2016-04-27 09:00:56]592. C# 2 支持 从 方法 组 到 一个 兼容 委托 类型 的 隐式 转换. [2016 ...

  7. AntV F2 数据可视化填坑,图表横向滚动

    柱状图横向滚动 思路 通过 Interaction 实现平移,通过 ScrollBar 显示滚动条 1.Interaction F2 提供一套交互机制,以达到通用交互行为的封装和复用.基于此机制,我们 ...

  8. Centos7搭建FastFDS----分布式文件服务系统服务端

    一.FastDFS介绍 FastDFS开源地址:https://github.com/happyfish100 参考:分布式文件系统FastDFS设计原理 参考:FastDFS分布式文件系统 1.1简 ...

  9. GPU与CPU

    GPU与CPU CPU CPU,也就是中央处理器,结构主要包括控制器(指挥各部分工作).运算器(实现数据加工).寄存器.高缓以及数据/控制/状态总线.计算机的性能很大程度上依赖于CPU,CPU的功能包 ...

  10. CGI fastCgi php-fpm PHP-CGI 辨析

    CGI fastCgi php-fpm PHP-CGI 辨析 LNMP环境中的nginx是不支持php的,需要通过fastcgi插件来处理有关php的请求.而php需要php-fpm这个组件提供该功能 ...