vue-cli项目下引入vant组件

Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有近50个组件，这些组件被广泛使用于有赞的各个移动端业务中。如果你需要开发一个移动商城，用 Vant 就再合适不过了。
vant地址：

本章目标

在vue-cli的项目中使用vant的相关组件

项目构建

如果您还没有搭建vue-cli项目，那么请参考https://www.cnblogs.com/jjgw/p/11334797.html这篇文章,我们搭建好的vue-cli项目结构如下：

1.接下来我们在控制台输入安装vant的命令

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

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

2.安装完成之后的结果

3.如果您不确定是否安装成功，那么我们可以去node_modules中查看

4.接下来我们还需要安装一个插件，方便我们之后优雅的使用vant,在控制台输入npm i babel-plugin-import -D 或者 npm install babel-plugin-import --save-dev 

5.接下来我们去.babelrc中配置一下

.babelrc代码：

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}]], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"] } } }