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 相关文章推荐
ajax 同步请求和异步请求的差异分析
Jul 04 Javascript
把字符串按照特定的字母顺序进行排序的js代码
Jan 28 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
JavaScript函数基础详解
Feb 03 Javascript
vue-axios使用详解
May 10 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 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下载文件名中解决乱码的问题
2013/06/20 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JS中==与===操作符的比较
2009/03/21 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jquery中绑定事件的异同
2017/02/28 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
vue绑定class与行间样式style详解
2017/08/16 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
JS数组求和的常用方法实例小结
2019/01/07 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Python中动态创建类实例的方法
2017/03/24 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
django rest framework vue 实现用户登录详解
2019/07/29 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
个人简历自我评价
2014/02/02 职场文书
建房协议书
2014/04/11 职场文书
安全月活动总结
2014/05/05 职场文书
医学生求职自荐书
2014/06/12 职场文书
服务理念标语
2014/06/18 职场文书
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL
SQL Server中的游标介绍
2022/05/20 SQL Server