今天学习如何优雅的使用vant
Vant简介
vant是有赞前端团队提供的Vue组件库。它的有点有以下5个:
- 国人制造,复合中国网站样式和交互习惯;
- 单元测试超过90%,有些个人的小样式组件是不作单元测试的;
- 支持babel-plugin-import引入,按需加载插件,无需单独引入样式;
- 支持TypeScript,这个是2018年前端最应该学的技术;
- 支持SSR,服务端渲染也是可以使用这个组件库的;
安装Vant
npm i vant -S
:这是简写形式。 npm install vant --save
:这是完整写法。
我是第一种方法安装失败了,所以使用第二种方法安装的
即使用如下代码进行安装,这是使用的淘宝的源,安装速度也很快
npm install vant --save --registry=https://registry.npm.taobao.org
然后进行对vant的引入
vant是支持babel-plugin-import引入的,它可以让我们按需引入组件模块,并且不用管理我们的样式,现在Vue项目组件库的主流引入方法。 安装babel-plugin-import
npm i babel-plugin-import -D
也可以使用完整写法
npm install babel-plugin-import --save-dev
在技术胖的博客里还有一种全局引入方式,但是会使最后的打包很大,所以没有使用
在.babelrc中配置plugins(插件)
"plugins": [
"transform-vue-jsx",
"transform-runtime",
["import",{"libraryName":"vant","style":true}]
]
我们设置好.babelrc后,就可以按需引入Vant框架了。比如现在我们引入一个Button
组件. 在src/main.js里加入下面的代码:
import { Button } from 'vant'
Vue.use(Button)
有了这段代码之后,我们就可以在需要的组件页面中加入Button
了.
<van-button type="primary">主要按钮</van-button>
最终效果为: