一:安装

npm i vant -S

二、引入组件(共有三个方法)

  方法一:使用 babel-plugin-import (推荐)

  1、 安装 babel-plugin-import 插件

npm i babel-plugin-import -D

2、 在 .babelrc 或 babel-loader 中添加插件配置  请覆盖原先代码否则会报错

{
"plugins": [
["import", { "libraryName": "vant", "style": true }]
]
}

 3、在代码中引入Vant组件,插件会自动将代码转化为方式二中的按需引入形式。

import { Button } from 'vant';

  方法二:按需引入组件

import { Button } from 'vant/lib/button';
import 'vant/lib/vant-css/base.css';
import 'vant/lib/vant-css/button.css';

  

     方法三:导入所有组件

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/vant-css/index.css'; Vue.use(Vant);

vue小白交流群,希望能够帮助到大家!

                                  

Vant UI 安装的更多相关文章

  1. zk ui安装 (选装,页面查看zk的数据)

    # 使用WEB UI查看监控集群-zk ui安装 cd /usr/local git clone https://github.com/DeemOpen/zkui.git yum install -y ...

  2. 自定义vant ui steps组件效果实现

    记录个问题,当作笔记吧:因为vue项目的移动端vant ui 的step组件跟ui设计图有差别,研究了半天还是没法使用step组件,只能手动设置一个 先上效果图和代码: (1)HTML部分 <d ...

  3. Vant UI 组件库如何做rem适配?

    Vant是一款移动端基于vue的组件库,V2.1.1版本非常棒.文档地址:https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/intro,那么V ...

  4. Vant ui

    轻量.可靠的移动端 Vue 组件库 https://youzan.github.io/vant/#/zh-CN/intro postcss-pxtorem vue:将px转化为rem,适配移动端van ...

  5. 把项目中的vant UI组件升级

    首先把之前 的VANT 卸载掉 npm uninstall vant 然后重新安装 一次vant npm i vant -S

  6. 010-SaltStack及SaltStack Web UI安装部署

    saltstack web uiweb平台界面 saltapi项目主页:http://salt-api.readthedocs.org/en/latest/ halite 项目主页:https://g ...

  7. vue使用Vant UI中的swiper组件及传值

    子组件SwiperBanner <!-- --> <template> <div class="swiper"> <van-swipe : ...

  8. vant ui TabBar封装

    TabBar.vue基本上是放在App.vue里面,都存在 <template> <div id="app"> <home-tab-bar :tar- ...

  9. Element Ui 安装以及配置

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i element-ui -S 引入 Element 你可以引入整个 Element,或是根据需要 ...

随机推荐

  1. 关于C++ return * this

    转自 :https://blog.csdn.net/u011846436/article/details/45222905 不废话,直接上例子,使用赋值构造函数解释为什么需要 return *this ...

  2. IT题库7-线程加锁

    转载:http://www.cnblogs.com/linjiqin/p/3208843.html 一.同步问题提出 线程的同步是为了防止多个线程访问一个数据对象时,对数据造成的破坏.例如:两个线程T ...

  3. Angular4 websocket通讯

  4. 执行python解释器的两种方式

    执行python解释器的两种方式 1.交互式 python是高级语言,是解释型语言,逐行翻译,写一句翻译一句 print ('hello world') 2.命令行式 python和python解释器 ...

  5. 三分钟了解Go语言的前世今生

    一. 为什么需要一个新的语言最近十年来,C/C++在计算领域没有很好得到发展,并没有新的系统编程语言出现.对开发程度和系统效率在很多情况下不能兼得.要么执行效率高,但低效的开发和编译,如C++:要么执 ...

  6. SlidingMenu第二篇 --- SlidingMenu常用属性介绍

    /** * 设置滑动的屏幕范围 * 1. TOUCHMODE_MARGIN 设置为全屏边缘可滑动 * 2. TOUCHMODE_FULLSCREEN 设置为全屏区域都可以滑动 * 3. TOUCHMO ...

  7. 搭建一个简单的Eureka程序

    Eureka集群主要有三个部分Eureka服务器,服务提供者,服务调用者 简单的来说就是服务提供者将服务注册到Eureka服务器,服务调用者对其服务进行查找调用. Eureka服务程序的搭建可参考官方 ...

  8. random shutil shevle xml

    random 模块 import random print(random.random())#(0,1)----float 大于0且小于1之间的小数 print(random.randint(1,3) ...

  9. pip使用国内源的配置方法

    [root@ ~]# cat ~/.pip/pip.conf [global] index-url = https://pypi.douban.com/simple

  10. django分页功能实现

    django内置的分页功能需要引入内置模块from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger Pagina ...