vant 前端web最流行的组件库的使用

connygpt 2024-12-11 10:56 19 浏览

次文章直供自己学习记录，有语句不同之处见谅！！！

vant 的使用需要依赖于 Vue cli

推荐使用 Vue 官方提供的脚手架 Vue Cli 3 创建项目

# 安装 Vue Cli
npm install -g @vue/cli

# 创建一个项目
vue create hello-world

# 创建完成后，可以通过命令打开图形化界面，如下图所示
vue ui

在图形化界面中，点击依赖 -> 安装依赖，然后将 vant 添加到依赖中即可。

vant的引入

安装：npm i vant -S

引入组件：

方式1.自动按需要引入组件

方式一. 自动按需引入组件 (推荐)

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

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

// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
 "plugins": [
 ["import", {
 "libraryName": "vant",
 "libraryDirectory": "es",
 "style": true
 }]
 ]
}

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置
module.exports = {
 plugins: [
 ['import', {
 libraryName: 'vant',
 libraryDirectory: 'es',
 style: true
 }, 'vant']
 ]
};

// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from 'vant';

如果你在使用 TypeScript，可以使用 ts-import-plugin 实现按需引入

方式二. 手动按需引入组件

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

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

方式三. 导入所有组件

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

注意：配置 babel-plugin-import 插件后，将不允许以这种方式导入组件

推荐：开发是导入所有组件，开发完毕后再配置按需引入。

Skeleton 骨架屏

引入

import Vue from 'vue';
import { Skeleton } from 'vant';

Vue.use(Skeleton);

<van-skeleton title :row="3">

属性：title 是否相识标题占位图值为true，或者false

row 段落占位符的行数值为数值

vant3

上一篇：Vue3+Vite+Vant-UI 开发双端招聘APP
下一篇：如何在element-ui中实现输入框中新输入的内容改变样式?

vant 前端web最流行的组件库的使用

vant的引入

Skeleton 骨架屏

相关推荐

在.net core中使用nginx做负载均衡

React 18 超全升级指南

LTUI v1.7 发布，一个基于 Lua 的跨平台字符终端 UI 界面库

生成对抗网络(GAN)的半监督学习

《若依ruoyi》第二十五章:Spring boot 上传下载封装详解二

QT进阶之路 : 布局详解

如何在 Element UI 中使用栅格布局实现响应式设计?

IDEA 中 Jetty 的配置操作手册 idea jfinal

如何在Dify平台上创建智能Agent:一步步教你实现超级智能体搭建

k8s自动化运维三