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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
React之PureComponent的使用作用
Jul 10 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
Jun 18 jQuery
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
JavaScript setInterval()与setTimeout()计时器
Dec 27 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 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
APMServ使用说明
2006/10/23 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
js特殊字符转义介绍
2013/11/05 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
jquery向后台提交数组的代码分析
2020/02/20 jQuery
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
Python写的英文字符大小写转换代码示例
2015/03/06 Python
python如何通过protobuf实现rpc
2016/03/06 Python
利用Anaconda完美解决Python 2与python 3的共存问题
2017/05/25 Python
python使用fork实现守护进程的方法
2017/11/16 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python输出指定字符串的方法
2020/02/06 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
python和php哪个容易学
2020/06/19 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
致长跑运动员加油稿
2014/02/20 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Python Socket编程详解
2021/04/25 Python