如何在Vant中引入Vue.js

这期内容当中小编将会给大家带来有关如何在Vant中引入Vue.js，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

1.安装vant

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

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

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

npminstallvant--save--registry=https://registry.npm.taobao.org

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

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

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

#安装babel-plugin-import插件
npmibabel-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>
<divclass="detail">
<divclass="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-buttontype="primary">主要按钮</van-button>
</div>
</template>

<script>
import{Swipe,SwipeItem,Button}from"vant"
exportdefault{
components:{
[Button.name]:Button,
[Swipe.name]:Swipe,
[SwipeItem.name]:SwipeItem
},
data(){
return{
}
},
methods:{}
}
</script>
<stylescoped>
</style>

上述就是小编为大家分享的如何在Vant中引入Vue.js了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。