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 相关文章推荐
使用Modello编写JavaScript类
Dec 22 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 Javascript
JS数组返回去重后数据的方法解析
Jan 03 Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
微信小程序实现图片滚动效果示例
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
经典的PHPer为什么被认为是草根?
2007/04/02 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
php调用C代码的实现方法
2014/03/11 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
JsRender for object语法简介
2014/10/31 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
js拖拽的原型声明和用法总结
2016/04/04 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
Vue中添加滚动事件设置的方法详解
2020/09/14 Javascript
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
大学毕业生简单自荐信
2013/11/05 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
土地转让协议书范本
2014/04/15 职场文书
二年级小学生评语
2014/04/21 职场文书
2014教师年度工作总结
2014/11/10 职场文书
小学班主任经验交流材料
2014/12/16 职场文书
酒店工程部经理岗位职责
2015/04/09 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
Python MNIST手写体识别详解与试练
2021/11/07 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python