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

2019-11-19 12:24:08

字体：大中小

来源：转载

供稿：网友

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：在Vant的基础上封装下拉日期控件的代码示例

下一篇：微信小程序实现图片滚动效果示例