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 IE 与 FF中兼容问题小结
Feb 18 Javascript
JS 判断代码全收集
Apr 28 Javascript
javascript 类型判断代码分析
Mar 28 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
Apr 11 Javascript
学习使用Bootstrap页面排版样式
May 11 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue进度条progressbar组件功能
Apr 17 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
JS+CSS实现动态时钟
Feb 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制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
详解PHP发送邮件知识点
2018/05/06 PHP
PHP实现通过CURL上传文件功能示例
2018/05/30 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
jquery trim() 功能源代码
2011/02/14 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
2017/06/14 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python计算两个日期相差天数的方法示例
2017/05/23 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
TensorFlow实现简单的CNN的方法
2019/07/18 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python @property原理解析和用法实例
2020/02/11 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
业务代表的岗位职责
2013/11/16 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
2015年药房工作总结
2015/04/25 职场文书
《田忌赛马》教学反思
2016/02/19 职场文书