Vue vant的安装与使用

左手的ㄟ右手 2023-07-20 13:46 15阅读 0赞

### Vant的安装与使用 ###

*   *  特性
     *  安装（使用npm）
     *  引入

Vant是一款轻量、可靠的移动端 Vue 组件库，开发方便、简单、快捷

## 特性 ##

*  60+ 高质量组件
 *  90% 单元测试覆盖率
 *  完善的中英文文档和示例
 *  支持按需引入
 *  支持主题定制
 *  支持国际化
 *  支持 TS
 *  支持 SSR

详细可见官网： [Vant官网][Vant]

## 安装（使用npm） ##

打开项目终端，输入命令

简写形式：npm i vant -S
    完整形式：npm install vant -save

如果网速慢的情况下可以使用淘宝镜像安装，不建议使用cnpm

npm install vant --save --registry=https://registry.npm.taobao.org

**说明**：如果安装成功可以在node-model中看到vant文件目录

## 引入 ##

1、全局引入（在src文件目录下main.js中全局引入）

引入组件：
    import Vant from 'vant'
    
    引入组件css：
    import 'vant/lib/vant-css/index.css'
    
    注册组件：
    Vue.use(vant)

2、手动按需引入

在不使用插件的情况下，可以手动引入需要的组件

import Button from 'vant/lib/button';
    import 'vant/lib/button/style';

3、自动按需引入

**说明**：全局引入是引入插件的所有文件，这样会使浏览器预览时变慢，所以vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。

安装插件babel-plugin-import

npm i babel-plugin-import -D
    
    完整命令
    npm install babel-plugin-import --save-dev

安装完成之后在.babelrc文件中配置plugins（插件）

"plugins": [
    	["import", { 
    		"libraryName": "vant",
    		"style": true
        }]
    ]
    // 接着你可以在代码中直接引入 Vant 组件
    // 插件会自动将代码转化为方式二中的按需引入形式
    import {  Button } from 'vant';
    Vue.use(Button);

引入完成之后就可以在需要的组件页面中加入Button了

<van-button type="primary">主要按钮</van-button>

[Vant]: https://youzan.github.io/vant/#/zh-CN/

发表评论取消回复

表情：

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

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

相关阅读

相关快速安装及使用Vant

（1）什么是Vant呢？ **答：Vant是一个轻量、可靠的移动端 Vue 组件库** （2）[Vant快速上手][Vant] **（3）安装和使用Va...

约定不等于承诺〃/ 2024年04月18日 14:43/ 0 赞/ 80 阅读

相关 Vue学习—Vue的安装与使用

文章目录一.vue简介 1.1 vue概念 1.2 vue的特点二.搭建vue环境 2.1 安装vue

爱被打了一巴掌/ 2024年04月01日 13:37/ 0 赞/ 90 阅读

相关 Vue vant的安装与使用

Vant的安装与使用特性安装（使用npm）引入 Vant是一款轻量、可靠的移动端 Vue 组件库，开发方便、简单、快

左手的ㄟ右手/ 2023年07月20日 13:46/ 0 赞/ 16 阅读

相关 vue使用Vant移动端组件库

Vant是一个轻量、可靠的移动端 Vue 组件库进入项目目录，安装Vant > npm i vant -S 在`main.js`引入引入`vant`，这

ゝ一世哀愁。/ 2023年02月13日 05:45/ 0 赞/ 18 阅读

相关 Vue+vant使用uploader上传图片

Vue使用vant上传图片给后台服务器这几天在写项目时，遇到了基本的业务需求，上传图片给后台，我是使用vant来开发的，由于是第一次亲身体验这种情况，所以当时我也是一头

今天药忘吃喽~/ 2023年01月15日 03:56/ 0 赞/ 687 阅读

相关 vue项目中使用vant

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

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

相关 vue-cli-vant-starter（vue-cli 和 vant 结合的项目开发模板）

新项目每次都需要去配置一个新的开发环境，索性直接搭一个模板，为以后快速开发使用。项目地址：[vue-cli-vant-starter][] vue-cli 和 vant

柔情只为你懂/ 2022年04月25日 08:34/ 0 赞/ 291 阅读

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

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

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

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

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

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

相关 vue 使用vant库

1、引入 cnpm i vant -S cnpm i babel-plugin-import -D 2、配置按需加载

雨点打透心脏的1/2处/ 2021年07月25日 00:58/ 0 赞/ 379 阅读