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 相关文章推荐
DOM精简教程
Oct 03 Javascript
javascript动画效果类封装代码
Aug 28 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
详解javascript中的变量提升和函数提升
May 24 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数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
2016/09/29 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
解决小程序无法触发SESSION问题
2020/02/03 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
浅谈keras中的目标函数和优化函数MSE用法
2020/06/10 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
运动会跳远加油稿
2014/02/20 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
网吧消防安全责任书
2014/07/29 职场文书
个人授权委托书模板
2014/09/14 职场文书
大学生党员个人总结
2015/02/13 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
JavaScript的Set数据结构详解
2022/02/18 Javascript
Kubernetes控制节点的部署
2022/04/01 Servers