VUE项目中安装和使用vant组件

谁借莪１个温暖的怀抱￠ 2021-08-19 22:44 546阅读 0赞

首先要搭建好vue脚手架：[https://blog.csdn.net/qq\_20757489/article/details/83718242][https_blog.csdn.net_qq_20757489_article_details_83718242]

组件中文文档地址：[https://youzan.github.io/vant/\#/zh-CN/intro][https_youzan.github.io_vant_zh-CN_intro]

### 1.使用NPM安装vant： ###

npm i vant -S

### 2.引入组件：使用 [babel-plugin-import][] (推荐) ###

`babel-plugin-import` 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

# 安装 babel-plugin-import 插件
    npm i babel-plugin-import -D

### 3.在.babelrc文件中配置plugins（插件） ###

"plugins": [
        "transform-vue-jsx", 
        "transform-runtime",
        ["import", [{ "libraryName": "vant", "style": true }]]
      ],

### 4、按需要引入vant组件，比如我们要在HelloWord.vue组件中使用 Loading 组件，我们可以先 在组件中引入  ###

<script>
    import { Loading } from 'vant'
    export default {
      components: {
        [Loading.name]: Loading
      }
    }
    </script>

### 5.然后在页面中加入组件代码 ###

<template>
       <div>
          <van-loading color="black" />
          <van-loading color="white" />
          <van-loading type="spinner" color="black" />
          <van-loading type="spinner" color="white" />
      </div>
    </template>

这样就可以看到效果了

[https_blog.csdn.net_qq_20757489_article_details_83718242]: https://blog.csdn.net/qq_20757489/article/details/83718242
[https_youzan.github.io_vant_zh-CN_intro]: https://youzan.github.io/vant/#/zh-CN/intro
[babel-plugin-import]: https://github.com/ant-design/babel-plugin-import

发表评论取消回复

表情：

评论列表（有 0 条评论，546人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue中使用Vant优惠券组件，按需导入发现报错，说组件没有注册？Vant组件使用报错

\[Vue warn\]: Unknown custom element: - did you register the component correctly? For...

约定不等于承诺〃/ 2024年04月17日 19:41/ 0 赞/ 91 阅读

相关在Vue项目中使用Element组件

0 写在前面使用组件可以快速进行开发，使用Element UI轻松制作出网页，为前端开发人员大大减轻了代码负担，即使是后端程序员也可以快速上手做出比较精美的界面。

绝地灬酷狼/ 2024年03月26日 15:47/ 0 赞/ 128 阅读

相关 vant中Dialog组件无法正常使用

vant中Dialog组件无法正常使用关于vue怎么配置vant，可以看这篇文章：[vue创建vant项目][vue_vant] 这是vant3中的Dialog组件，

╰+攻爆jí腚メ/ 2024年03月16日 16:18/ 0 赞/ 52 阅读

相关 vue-cli项目下引入vant组件

前言 Vant是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。通过 Vant，可以快速搭建出风格统一的页面，提升开发效率。

Myth丶恋晨/ 2023年08月17日 15:39/ 0 赞/ 180 阅读

相关详解Vant组件的使用

> 官方文档地址： [https://youzan.github.io/vant/\/zh-CN/][https_youzan.github.io_vant_zh-CN] 目

- 日理万妓/ 2023年02月10日 05:17/ 0 赞/ 43 阅读

相关 vue项目中使用vant

全局使用在main.js中全局引入vant import Vant from 'vant'; import 'vant/lib/index.css';

痛定思痛。/ 2022年12月22日 14:28/ 0 赞/ 230 阅读

相关 uni-app使用Vant组件

前言 ![3a7c8820d31bc5d410ef41314a3055cc.png][]vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版[（va

素颜马尾好姑娘i/ 2022年12月22日 09:28/ 0 赞/ 1097 阅读

相关在Vue项目中使用React组件，在React项目中使用Vue组件

开发中遇到一个需求：在Vue项目中使用已经开发好的React组件。这里选择了使用vuera库来完成需求。下面记录一下使用的步骤（在Reat项目中使用Vue组件与此步骤类似）。

短命女/ 2022年10月12日 05:59/ 0 赞/ 653 阅读

相关 vue-cli项目中使用axios/vant

1.下载安装执行下载命令：npm i axios -S / npm install axios --save-dev 查看是否安装成功：

青旅半醒/ 2021年09月13日 15:50/ 0 赞/ 574 阅读

相关 VUE项目中安装和使用vant组件

首先要搭建好vue脚手架：[https://blog.csdn.net/qq\_20757489/article/details/83718242][https_blog.cs

谁借莪１个温暖的怀抱￠/ 2021年08月19日 22:44/ 0 赞/ 547 阅读