这期内容当中小编将会给大家带来有关如何在Vant中引入Vue.js,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
专注于为中小企业提供做网站、网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业周村免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
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.或者在引用的组件页面
1 2 3 4 主要按钮
上述就是小编为大家分享的如何在Vant中引入Vue.js了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。