vue2.x+koa2实战电商（二）

今天学习如何优雅的使用vant

Vant简介

vant是有赞前端团队提供的Vue组件库。它的有点有以下5个：

1. 国人制造，复合中国网站样式和交互习惯；
2. 单元测试超过90%，有些个人的小样式组件是不作单元测试的；
3. 支持babel-plugin-import引入，按需加载插件，无需单独引入样式；
4. 支持TypeScript，这个是2018年前端最应该学的技术；
5. 支持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>

 

最终效果为：