Vant 的安装和使用，附带实例

Vant 的安装

Vant 可以用于 vue 里来美化代码，首先看进行安装，搜索 npm ,在npm 搜索 vant , 在 cmd 里面输入 npm i vant -S 即可下载成功

相关插件

npm i babel-plugin-import -D

以下参考官方文档

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

接着就可以在代码中直接引入 Vant 组件
例如：

import { Button } from 'vant';

实例展示

现在就来看以下一个实例展示伐：

这里展示的是一个基础用法，前提是要把 Vant 下载完成，博主这里展示以下按钮以及文本框这一类

首先先看一下原页面

看这个页面我们可以发现可以修改文本框或者按钮来美化，打开
https://youzan.github.io/vant/#/zh-CN/quickstart 找到快速上手那一部分，在右侧可以看有很多的组件

点击需要的组件，把引入那部分的代码先写到自己的代码当中，然后再在 template 里使用即可


最后看一下效果图

就这样完成啦 那个超链接的地址很好用邓一定要去看呀 如果文章有错误的地方欢迎留言蟹蟹