VUE3实战二之Vant UI库使用

Coder-michael

已于 2022-09-06 15:02:28 修改

阅读量435

点赞数

分类专栏： Vue进阶文章标签： ui javascript vant vue vue3实战

于 2022-09-05 21:48:57 首次发布

本文链接：https://blog.csdn.net/weixin_46036165/article/details/126714124

版权

Vue进阶专栏收录该内容

15 篇文章 4 订阅

订阅专栏

本文介绍了Vant UI库，它是一个轻量级的移动端Vue组件库，提供了丰富的UI组件。接着详细讲解了如何通过npm安装和使用Vant，并展示了如何在Vue3项目中使用Vant的Button组件，包括不同类型的按钮：primary、success、default、danger和warning。

摘要由CSDN通过智能技术生成

1. Vant介绍

https://vant-ui.github.io/vant/#/en-US

2. Vant的安装使用

based on : https://vant-ui.github.io/vant/#/en-US/quickstart

npm install vant # install vant module
npm install unplugin-vue-components -D  # install 按需引入的插件

在这里插入图片描述

2.1. button

<template>
  <h1>home</h1>
    <van-button type="primary">Primary</van-button>
    <van-button type="success">Success</van-button>
    <van-button type="default">Default</van-button>
    <van-button type="danger">Danger</van-button>
    <van-button type="warning">Warning</van-button>
</template>

<script>
export default {

}
</script>

<style>

</style>