一:安装

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. Visual Studio 项目依赖

    在解决方案上点击右键,选择项目依赖项 选择需要发布的所有依赖项目 主要是为了解决插件项目DLL无法生成的问题

  2. [NOIP2017赛前复习第二期]复赛考试技巧与模版-普及组

    考试技巧 1.拿到考卷首先通看题目,按自己感觉的难度排序(普及一般是1-2-3-4了~还是相信出题人不会坑我们的2333) 2.一般来说,普及组前两道题比较简单(大水题啊233~),但是通常坑很多,例 ...

  3. var,dynamic的用法

    private void Form1_Load(object sender, EventArgs e) { var dt = Getuser() as IEnumerable<dynamic&g ...

  4. VS2017不能弹出安装界面的原因.

    如果这里选中了放大.100%入坑 解决办法:  禁用视觉主题,和元素,即可安装正常

  5. socket的原理和实验

    1.socket原理 根据连接启动的方式以及本地套接字要连接的目标,套接字之间的连接过程可以分为三个步骤:服务器监听,客户端请求,连接确认. (1)服务器监听:是服务器端套接字并不定位具体的客户端套接 ...

  6. AI时代学习新的技术,方向为计算机视觉--欢迎来我的简书blog拔草

    2017-09-01 19:29:33 简书blog: https://www.jianshu.com/u/973c8c406de7

  7. 详解docker中容器devicemapper设备的挂载流程

    事故起因 版本说明:本文中docker版本主要基于1.10版本,操作系统为centos7.devicemapper在文中缩写为dm. 某个用户的容器启动不起来,启动时候一直报错.通过docker lo ...

  8. 国际空间站直播 ISS直播

    b站:https://live.bilibili.com/9196015 斗鱼:https://www.douyu.com/543816 欢迎大家 (ฅ´ω`ฅ)

  9. 20175307《Java程序设计》第5周学习总结

    教材内容总结 6.1  接口 1接口声明 接口使用关键字interface来进行声明 eg:interface  接口的名字 2接口体 接口体中包含常量的声明和抽象方法两部分(没有变量) 注意一定的要 ...

  10. 自动化运维 --- git

    一. git 概括 二.常用指令 git init 初始化 git status 查看git的状态 git add 将文件放到缓存区 git commit -m 将缓存区的内容提交到本地仓库 git ...