Vant的安装和配合引入Vue.js项目里的方法步骤

 更新时间:2018年12月05日 14:45:12   作者:安树  
这篇文章主要介绍了Vant的安装和配合引入Vue.js项目里的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

1.安装vant

npm i vant -S:这是简写形式。

npm install vant --save:这是完整写法。

如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装。

npm install vant --save --registry=https://registry.npm.taobao.org 

淘宝镜像,速度快,安装后查看package.json文件里看是否安装完成


2.1使用 babel-plugin-import (推荐)

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
npm i babel-plugin-import -D 

2.2  文件.babelrc文件配置


 "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 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 打包组件报错:Error:Cannot find module 'vue/compiler-sfc'

    打包组件报错:Error:Cannot find module 'vue/compiler-sfc&ap

    最近遇到这样的问题,vue组件库搭建过程中使用webpack打包组件时报错,本文给大家分享打包组件报错:Error: Cannot find module ‘vue/compiler-sfc‘的解决方法,感兴趣的朋友一起看看吧
    2023-12-12
  • vue.js添加一些触摸事件以及安装fastclick的实例

    vue.js添加一些触摸事件以及安装fastclick的实例

    今天小编就为大家分享一篇vue.js添加一些触摸事件以及安装fastclick的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue组件封装方案实现浅析

    Vue组件封装方案实现浅析

    这篇文章主要介绍了Vue组件封装方案实现,我们将从分析组件封装的优势开始,然后依次介绍 vue.js 的基本概念,以及如何创建、封装和使用自定义组件
    2023-03-03
  • Vue中的项目打包及部署全流程

    Vue中的项目打包及部署全流程

    这篇文章主要介绍了Vue中的项目打包及部署全流程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 一步步教你用Vue.js创建一个组件(附代码示例)

    一步步教你用Vue.js创建一个组件(附代码示例)

    组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,下面这篇文章主要给大家介绍了关于如何一步步用Vue.js创建一个组件的相关资料,需要的朋友可以参考下
    2022-12-12
  • vue.js 使用axios实现下载功能的示例

    vue.js 使用axios实现下载功能的示例

    下面小编就为大家分享一篇vue.js 使用axios实现下载功能的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看
    2018-03-03
  • Vue3菜单展开和收起实现

    Vue3菜单展开和收起实现

    在Vue项目中实现首页布局,包括可收放的左侧菜单和主体内容区,在store中管理菜单状态,通过修改isCollapse状态控制菜单的展开与收起,在home.vue中编写左侧菜单栏的代码和样式,实现一个响应式的用户界面
    2024-09-09
  • vue中渲染对象中属性时显示未定义的解决

    vue中渲染对象中属性时显示未定义的解决

    这篇文章主要介绍了vue中渲染对象中属性时显示未定义的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue.js 2.0中select级联下拉框实例

    Vue.js 2.0中select级联下拉框实例

    在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用,需要的朋友可以参考下
    2017-03-03
  • vue3+vite+antd如何实现自定义主题

    vue3+vite+antd如何实现自定义主题

    这篇文章主要介绍了vue3+vite+antd如何实现自定义主题问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论