详解vant组件应用于Vue2

目录

1.安装

1.1 npm安装

1.2 CDN安装

1.3 利用脚手架安装

1.3.1 安装脚手架（没有安装脚手架的）

1.3.2 利用脚手架创建程序

1.3.3 使用vue ui进行依赖的安装

1.3.4 依赖安装

 2.引入组件

2.1 自动按需引入组件

2.1.1 首先要先下载babel-plugin-import 来进行配置

2.1.2 新建一个js文件，名字为babel.config.js，来进行配置

2.1.3 使用

2.2 手动按需引入组件

2.3 导入所有组件

3. 组件注册

3.1 全局注册

3.1.1 在main.js中全局注册

3.2 局部注册

4. vant的基础使用

4.1 国际化操作

4.1.1 多语言的切换

4.1.2 语言包的修改与扩展

4.2 Prop和监听事件

4.2.1 Prop

4.2.2 Event监听事件

---

1.安装

1.1 npm安装

使用npm安装，在创建好的项目中使用npm命令安装

安装最新版的vant

npm i vant@latest-v2 -S

1.2 CDN安装

使用cdn安装就是在HTML界面中通过引入CDN链接对于vant组件进行全局访问

例：

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/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/cli

1.3.2 利用脚手架创建程序

首先进入到你想要创建脚手架的文件目录下，然后执行命令

vue create 你想要创建的脚手架的名称

1.3.3 使用vue ui进行依赖的安装

部署好脚手架后，在命令行输入vue ui 进入图形化界面，安装依赖

vue ui

1.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的种类非常多，他的属性也有很多

Prop

参数	说明	类型	默认值
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