Vant ( ˈvænt ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城,用 Vant 就再合适不过了。
中文文档链接:https://www.youzanyun.com/zanui/vant#/zh-CN/intro
安装Vant
npm i vant -S
:这是简写形式。
npm install vant --save
:这是完整写法。
如果你网络很慢的话,可以使用淘宝的源,但是不建议使用cnpm来进行安装。
npm install vant --save --registry=https://registry.npm.taobao.org
引入Vant的第一种方法(不推荐)
安装好vant后,可以使用以前常用的方法进行引入-这是一种全局引入的方式。
直接在src/main.js进行全局引入。
|
import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(vant)
|
简单的三行代码已经可以把Vant引入进来了,但是这种方式在最后打包发布时会增加包的大小,Vue的SPA首屏打开时本来就有些慢,所以不建议使用这种方法进行引入。
优雅的引入Vant
vant是支持babel-plugin-import引入的,它可以让我们按需引入组件模块,并且不用管理我们的样式,现在Vue项目组件库的主流引入方法。
安装babel-plugin-import
npm i babel-plugin-import -D
也可以使用完整写法
|
npm
install
babel
-
plugin
-
import
--
save
-
dev
|
![](https://i-blog.csdnimg.cn/blog_migrate/7abdc9c2a25ce7e6b98e52e747e11314.png)
在.babelrc中配置plugins(插件)
![](https://i-blog.csdnimg.cn/blog_migrate/d523ac66d990858e225ff771a4783660.png)
2
3
4
|
import
Vant
from
'vant'
import
'vant/lib/vant-css/index.css'
Vue
.
use
(
vant
)
|
2
|
npm
install
babel
-
plugin
-
import
--
save
-
dev
|
按需使用Vant组件1
我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button
组件,在src/main.js里加入下面的代码:
Button
了.
按需使用Vant组件2
不在src/main.js里加入代码,而在需要的页面单独引入:
Navbar 和 icon
了.
![](https://i-blog.csdnimg.cn/blog_migrate/ae30e75787b5a9a365b68edc96738035.png)
感谢技术胖教带我走进了Vant的大门,这是他的博客 http://jspang.com/,想学Vue的可以去博客看看哦!