Vant的安装和配合引入Vue.js项目里的方法步骤


Posted in Javascript onDecember 05, 2018

1.安装vant

npm i vant -S:这是简写形式。

npm install vant --save:这是完整写法。

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装。

npm install vant --save --registry=https://registry.npm.taobao.org

淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成

Vant的安装和配合引入Vue.js项目里的方法步骤

2.1使用 babel-plugin-import (推荐)

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D

2.2  文件.babelrc文件配置

Vant的安装和配合引入Vue.js项目里的方法步骤

"plugins":[
  "transform-runtime",
  ["import",{
   "libraryName":"vant",
   "libraryDirectory":"es",
   "style":true
  }]
 ],

更新了vue版本后。重新配置上述文件

"plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    ["import", [{ "libraryName": "vant","libraryDirectory":"es","style": true }]]
  ]

页面按需引入;

可以再main.js里写,也可以在引用的组件页面写,根据自己需求或喜好。我喜好第2种写法

1.main.js:

import { Button } from 'vant'
Vue.use(Button)

2.或者在引用的组件页面

<template>
    <div class="detail">
      <div class="slide">
        <van-swipe :autoplay="3000">
          <van-swipe-item>1</van-swipe-item>
          <van-swipe-item>2</van-swipe-item>
          <van-swipe-item>3</van-swipe-item>
          <van-swipe-item>4</van-swipe-item>
        </van-swipe>
      </div>
    <van-button type="primary">主要按钮</van-button>
    </div>
</template>
 
<script>
  import { Swipe,SwipeItem,Button } from "vant"
    export default {
      components:{
         [Button.name]:Button,
         [Swipe.name]:Swipe,
         [SwipeItem.name]:SwipeItem
      },
        data () {
            return {
            }
        },
        methods: {}
    }
</script>
<style scoped>
</style>

官方文档参考:https://youzan.github.io/vant/#/zh-CN/quickstart 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
简单实现js浮动框
Dec 13 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
详解angular2如何手动点击特定元素上的点击事件
Oct 16 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
微信小程序实现图片滚动效果示例
Dec 05 #Javascript
详解vue中的computed的this指向问题
Dec 05 #Javascript
使用rollup打包JS的方法步骤
Dec 05 #Javascript
微信小程序入门之广告条实现方法示例
Dec 05 #Javascript
Vue实现本地购物车功能
Dec 05 #Javascript
node和vue实现商城用户地址模块
Dec 05 #Javascript
解决node-sass偶尔安装失败的方法小结
Dec 05 #Javascript
You might like
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php动态生成函数示例
2014/03/21 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
javascript function(函数类型)使用与注意事项小结
2019/06/10 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
简单介绍Python中的decode()方法的使用
2015/05/18 Python
python中类的属性和方法介绍
2018/11/27 Python
PyQt5的安装配置过程,将ui文件转为py文件后显示窗口的实例
2019/06/19 Python
python config文件的读写操作示例
2019/09/27 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
禁毒宣传工作方案
2014/05/23 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技