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 相关文章推荐
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery实现隔行变色的方法分析(对比原生JS)
Nov 18 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
详解jquery选择器的原理
Aug 01 jQuery
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
JavaScript实现获取select下拉框中第一个值的方法
Feb 06 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
Mar 29 Javascript
js实现简单的随机点名器
Sep 17 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入门的学习方法
2007/01/02 PHP
php5.2.0内存管理改进
2007/01/22 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
javascript制作的cookie封装及使用指南
2015/01/02 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
javascript三种代码注释方法
2016/06/02 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
深入理解vuex2.0 之 modules
2017/11/20 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Python中字符串List按照长度排序
2019/07/01 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python Tensor和Array对比分析
2020/01/08 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
华为C++笔试题
2014/08/05 面试题
英语专业学子个人的自我评价
2013/10/02 职场文书
初中军训感想300字
2014/03/05 职场文书
防溺水主题班会教案
2015/08/12 职场文书
假如给我三天光明:舟逆水而行,人遇挫而达 
2019/10/29 职场文书
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android