目录

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 dangerstringdefault
size尺寸,可选值为 large small ministringnormal
text按钮文字string-
color按钮颜色,支持传入 linear-gradient 渐变色string-
icon左侧图标名称或图片链接string-
icon-prefix v2.6.0图标类名前缀,同 Icon 组件的 class-prefix 属性stringvan-icon
icon-position v2.10.7图标展示位置,可选值为 rightstringleft
tag按钮根节点的 HTML 标签stringbutton
native-type原生 button 标签的 type 属性string-
block是否为块级元素booleanfalse
plain是否为朴素按钮booleanfalse
square是否为方形按钮booleanfalse
round是否为圆形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用 0.5px 边框booleanfalse
loading是否显示为加载状态booleanfalse
loading-text加载状态提示文字string-
loading-type加载图标类型,可选值为 spinnerstringcircular
loading-size加载图标大小string20px
url点击后跳转的链接地址string-
to点击后跳转的目标路由对象,同 vue-router 的 to 属性string | object-
replace是否在跳转时替换当前页面历史boolean

false

4.2.2 Event监听事件

事件名说明回调参数
click点击按钮,且按钮状态不为加载或禁用时触发event: Event
touchstart开始触摸按钮时触发event: TouchEvent

Logo

前往低代码交流专区

更多推荐