目录
2.1.1 首先要先下载babel-plugin-import 来进行配置
2.1.2 新建一个js文件，名字为babel.config.js，来进行配置
1.安装
1.1 npm安装
使用npm安装，在创建好的项目中使用npm命令安装
安装最新版的vant
npm i vant@latest-v2 -S1.2 CDN安装
使用cdn安装就是在HTML界面中通过引入CDN链接对于vant组件进行全局访问
例：
<!-- 引入样式文件 -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css"
/>
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
<script>
// 在 #app 标签下渲染一个按钮组件
new Vue({
el: '#app',
template: `<van-button>按钮</van-button>`,
});
// 调用函数组件，弹出一个 Toast
vant.Toast('提示');
// 通过 CDN 引入时不会自动注册 Lazyload 组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
</script>1.3 利用脚手架安装
现在对于一些经常使用vue的程序员来说，脚手架无疑是最便捷的方法，vant也可以支持脚手架安装
1.3.1 安装脚手架（没有安装脚手架的）
npm install -g @vue/cli1.3.2 利用脚手架创建程序
首先进入到你想要创建脚手架的文件目录下，然后执行命令
vue create 你想要创建的脚手架的名称1.3.3 使用vue ui进行依赖的安装
部署好脚手架后，在命令行输入vue ui 进入图形化界面，安装依赖
vue ui1.3.4 依赖安装
2.引入组件
2.1 自动按需引入组件
2.1.1 首先要先下载babel-plugin-import 来进行配置
npm i babel-plugin-import -D //安装为开发依赖2.1.2 新建一个js文件，名字为babel.config.js，来进行配置
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};2.1.3 使用
进行好上面一系列配置以后，就可以使用了，在你想要使用的组件中引入即可
import { Button } from 'vant';2.2 手动按需引入组件
直接在你想要使用的组件中引入
import Button from 'vant/lib/button';
import 'vant/lib/button/style';2.3 导入所有组件
在vue-cli中，在main.js中引入所有组件
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);注意：这种方法会让你打包后的文件内容过大，所以不推荐这种方法，比较推荐第一种自动引入组件的方法
3. 组件注册
3.1 全局注册
3.1.1 在main.js中全局注册
import Vue from 'vue';
import { Button } from 'vant';
Vue.use(Button);全局注册完之后就可以在组件中使用，也不用导入任何组件，
例：
<template>
<div class="home">
<van-button type="info">信息按钮</van-button>
</div>
</template>
<script>
export default {
}
</script>3.2 局部注册
局部注册就需要我们在需要使用的组件中引入
例：
<template>
<div class="home">
<van-button type="info">信息按钮</van-button>
</div>
</template>
<script>
import { Button } from 'vant'
export default {
name: 'Home',
components: {
[Button.name]: Button
},
}
</script>4. vant的基础使用
4.1 国际化操作
随着国际多元化的发展，我们自己的网页也有可能被外国友人访问到，这个时候就需要我们对于我们的项目进行一些国际化操作
4.1.1 多语言的切换
Vant 通过 Locale 组件实现多语言支持，使用 Locale.use 方法可以切换当前使用的语言。
import { Locale } from 'vant';
// 引入英文语言包
import 你想要引入的语言包 from 'vant/es/locale/lang/en-US';
Locale.use('定义的名字', 你想要引入的语言包);4.1.2 语言包的修改与扩展
使用locale.add方法进行操作
import { Locale } from 'vant';
const messages = {
'zh-CN': {
vanPicker: {
confirm: '关闭', // 将'确认'修改为'关闭'
},
},
};
Locale.add(messages);目前vant中支持的语言包
| 语言 | 文件名 |
|---|---|
| 简体中文 | zh-CN |
| 繁體中文（港） | zh-HK |
| 繁體中文（台） | zh-TW |
| 英语 | en-US |
| 德语 | de-DE |
| 德语 (正式） | de-DE-formal |
| 土耳其语 | tr-TR |
| 西班牙语 | es-ES |
| 日语 | ja-JP |
| 罗马尼亚语 | ro-RO |
| 挪威语 | nb-NO |
| 泰语 | th-TH |
| 法语 | fr-FR |
| 越南语 | vi-VN |
4.2 Prop和监听事件
有很多组件中是可以注册监听事件的，例如input这个标签就可以使用监听事件，来监听他的变化
4.2.1 Prop
这里咱们以Button为例子
vant中的button的种类非常多，他的属性也有很多
| 参数 | 说明 |
类型 | 默认值 |
|---|---|---|---|
| type | 类型，可选值为 primary info warning danger |
string | default |
| size | 尺寸，可选值为 large small mini |
string | normal |
| text | 按钮文字 | string | - |
| color | 按钮颜色，支持传入 linear-gradient 渐变色 |
string | - |
| icon | 左侧图标名称或图片链接 | string | - |
icon-prefix v2.6.0 |
图标类名前缀，同 Icon 组件的 class-prefix 属性 | string | van-icon |
icon-position v2.10.7 |
图标展示位置，可选值为 right |
string | left |
| tag | 按钮根节点的 HTML 标签 | string | button |
| native-type | 原生 button 标签的 type 属性 | string | - |
| block | 是否为块级元素 | boolean | false |
| plain | 是否为朴素按钮 | boolean | false |
| square | 是否为方形按钮 | boolean | false |
| round | 是否为圆形按钮 | boolean | false |
| disabled | 是否禁用按钮 | boolean | false |
| hairline | 是否使用 0.5px 边框 | boolean | false |
| loading | 是否显示为加载状态 | boolean | false |
| loading-text | 加载状态提示文字 | string | - |
| loading-type | 加载图标类型，可选值为 spinner |
string | circular |
| loading-size | 加载图标大小 | string | 20px |
| url | 点击后跳转的链接地址 | string | - |
| to | 点击后跳转的目标路由对象，同 vue-router 的 to 属性 | string | object | - |
| replace | 是否在跳转时替换当前页面历史 | boolean | false |
4.2.2 Event监听事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
| touchstart | 开始触摸按钮时触发 | event: TouchEvent |