一:安装

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. 解决ssh连接问题1

    某天服务器A与B,互相ping没问题,telnet 22端口没问题 ssh -v a@10.80.97.241 OpenSSH_6.6.1, OpenSSL 1.0.1k-fips 8 Jan 201 ...

  2. Go语言代码规范指导

    本规范旨在为日常Go项目开发提供一个代码的规范指导,方便团队形成一个统一的代码风格,提高代码的可读性,规范性和统一性.本规范将从命名规范,注释规范,代码风格和 Go 语言提供的常用的工具这几个方面做一 ...

  3. CentOS 7安装mysql(rpm)

    1.检查是否安装了mysql rpm -qa|grep -i mysql centos7默认是安装的mariadb,而安装mysql的话会和mariadb的文件冲突,所以需要先卸载掉mariadb 2 ...

  4. python 识别图片上的数字

    https://blog.csdn.net/qq_31446377/article/details/81708006 ython 3.6 版本 Pytesseract 图像验证码识别 环境: (1) ...

  5. 利用composer安装laraval

    首先,毋庸置疑我们需要安装composer.这个在我上一篇文章中有提到,这里不做过多赘述. 其次,配置composer国内镜像.(如果不配置国内镜像,你们懂得) 打开cmd输入以下命令即可 compo ...

  6. 重写Java中包装类的方法

    知识点一.Object类Object是所有类的父类.Object中的方法有:toString() 描述对象的信息,需要重写.System.out.println在打印对象的时候会默认调用对象的toSt ...

  7. .NET EF框架的安装、及三种开发模式

    一.EF框架的安装: 要在VS(如Visual Studio 2012)中使用EF框架,就需要先进行安装. 我们需要给这个应用安装EntityFramework包,引入EF框架相关的内容,我们需要引入 ...

  8. Ubuntu18.04安装SS(不是服务器端!!!)

    终于下定决心把我1T的机械硬盘格式化了- -,分了100G装了Ubuntu 18.04,在安装shadowsocks的时候有些东西想记下来.shadowsocks目前在ubuntu上使用的主要有两个版 ...

  9. Star in Parentheses

    问题 A: Star in Parentheses 时间限制: 1 Sec  内存限制: 128 MB 题目描述 You are given a string S, which is balanced ...

  10. CSDN去广告插件

    因为避免不了与代码打交道,所以经常要上网搜代码,一般搜索到的资源都指向了CSDN,然而,好好的一篇博文,上面有很多广告,看着很不舒服,冲vip是不可能的,穷的的要死,怎么办呢?写个插件把! 去广告原理 ...