vue基础6--vant组件库的基本使用
Posted 咖啡壶子
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue基础6--vant组件库的基本使用相关的知识,希望对你有一定的参考价值。
1. vant组件库
1.0 vant组件库-介绍
vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用
特点:
- 提供 60 多个高质量组件,覆盖移动端各类场景
- 性能极佳,组件平均体积不到 1kb
- 完善的中英文文档和示例
- 支持 Vue 2 & Vue 3
- 支持按需引入和主题定制
1.1 全部引入
1.全部引入, 快速开始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
2.下载Vant组件库到当前项目中
3.在main.js中全局导入所有组件,
4.使用按钮组件 – 作为示范的例子
-
下载vant组件库到当前项目中
yarn add vant -D
-
导入所有组件, 在main.js中
import Vue from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant);
-
使用按钮组件
https://vant-contrib.gitee.io/vant/#/zh-CN/button
<van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button>
1.2 手动按需引入
1.手动单独引入, 快速开始: https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart
// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式
- 注册
// components: // 手动注册组件名
// // VanButton: Button
// // 等价的
// [Button.name]: Button
//
- 使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
1.3 自动按需引入
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式。
-
安装插件
yarn add babel-plugin-import -D
-
在babel配置文件里 (babel.config.js)
module.exports = plugins: [ ['import', libraryName: 'vant', libraryDirectory: 'es', style: true , 'vant'] ] ;
-
全局注册 - 会自动按需引入
// 方式1: 全局 - 自动按需引入vant组件 // (1): 下载 babel-plugin-import // (2): babel.config.js - 添加官网说的配置 (一定要重启服务器) // (3): main.js 按需引入某个组件, Vue.use全局注册 - 某个.vue文件中直接使用vant组件 import Button from 'vant'; Vue.use(Button) // Button组件全局注册, 真正注册的组件名VanButton
1.4 弹出框使用
https://vant-contrib.gitee.io/vant/#/zh-CN/dialog
<template>
<div>
<van-button type="primary" @click="btn">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</div>
</template>
<script>
// 方式2: 手动 按需引入
// import Button from 'vant/lib/button'; // button组件
// import 'vant/lib/button/style'; // button样式
// 目标: 使用弹出框
// 1. 找到vant文档
// 2. 引入
// 3. 在恰当时机, 调用此函数 (还可以用组件的用法)
import Dialog from "vant";
export default
// components: // 手动注册组件名
// // VanButton: Button
// // 等价的
// [Button.name]: Button
//
methods:
btn()
Dialog( message: "提示", showCancelButton: true ); // 调用执行时, 页面就会出弹出框
,
,
;
</script>
1.5 表单使用
目标: 使用vant组件里的表单组件
https://vant-contrib.gitee.io/vant/#/zh-CN/form
表单验证规则:
以上是关于vue基础6--vant组件库的基本使用的主要内容,如果未能解决你的问题,请参考以下文章