Vue vant的安装与使用

Vant是一款轻量、可靠的移动端 Vue 组件库，开发方便、简单、快捷

特性

• 60+ 高质量组件
• 90% 单元测试覆盖率
• 完善的中英文文档和示例
• 支持按需引入
• 支持主题定制
• 支持国际化
• 支持 TS
• 支持 SSR

详细可见官网： Vant官网

安装（使用npm）

打开项目终端，输入命令

简写形式：npm i vant -S
完整形式：npm install vant -save

如果网速慢的情况下可以使用淘宝镜像安装，不建议使用cnpm

npm install vant --save --registry=https://registry.npm.taobao.org

说明：如果安装成功可以在node-model中看到vant文件目录

引入

1、全局引入（在src文件目录下main.js中全局引入）

引入组件：
import Vant from 'vant'

引入组件css：
import 'vant/lib/vant-css/index.css'

注册组件：
Vue.use(vant)

2、手动按需引入

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

3、自动按需引入

说明：全局引入是引入插件的所有文件，这样会使浏览器预览时变慢，所以vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。

安装插件babel-plugin-import

npm i babel-plugin-import -D

完整命令
npm install babel-plugin-import --save-dev

安装完成之后在.babelrc文件中配置plugins（插件）

"plugins": [
	["import", {
		"libraryName": "vant",
		"style": true
    }]
]
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';
Vue.use(Button);

引入完成之后就可以在需要的组件页面中加入Button了

<van-button type="primary">主要按钮</van-button>