【vant】--移动端vue组件库相关用法

最新推荐文章于 2024-08-24 15:30:52 发布

cdgogo

最新推荐文章于 2024-08-24 15:30:52 发布

阅读量627

点赞数

分类专栏： vue框架

本文链接：https://blog.csdn.net/cdgogo/article/details/107962347

版权

本文介绍了如何使用Vant作为移动端Vue组件库，通过npm安装，并利用babel-plugin-import插件实现自动按需引入组件，以优化项目体积。

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

网址：https://vant-contrib.gitee.io/vant/#/zh-CN/home

通过 npm 安装

npm i vant -S

自动按需引入组件

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

安装插件

npm i babel-plugin-import -D

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cdgogo

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

移动端项目（vue2+vant组件库）

qq_45585640的博客

06-23

6947

在命令行中输入以下命令创建 Vue 项目：这里建议两个都选上，更严谨。这里建议选择第 1 个，保存到单独的配置文件，这样方便我们做自定义配置。安装结束，命令提示你项目创建成功，按照命令行的提示在终端中分别输入： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UynFzUoP-1654274042910)(assets/1582010300149-9932febe-2625-4ee7-986f-9190ab449fec.png)]如

利用vue-cli + vant搭建一个移动端开发模板

weixin_40952974的博客

01-31

965

本文系原创，转载请附带作者信息。项目地址： https://github.com/momozjm/vant-project.git 前言在项目开发过程中，一个新的项目需要我们从零开始搭建框架，这个时候我们就可以用网上很多的脚手架进行开发，但是我们在业务开发时，还需要对项目的架构进行完善。如果有一个类似于ant design pro这种类型的项目可以拿来即用，不需要过多的配置，就可以...

参与评论您还未登录，请先登录后发表或查看评论

Vant 移动端Vue组件库的使用

weixin_45685517的博客

07-21

1032

vant组件库

一条小胖鱼

07-05

2832

1.vant 组件库介绍：vant是一个轻量、可靠的移动端 Vue 组件库, 开箱即用。特点：提供 60 多个高质量组件，覆盖移动端各类场景性能极佳，组件平均体积不到 1kb 完善的中英文文档和示例支持 Vue 2 & Vue 3 支持按需引入和主题定制 1.1全部导入目的：看官方文档，下载，引入vant组件库全部引入, 快速开始:https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart 1.全部引入, 快速开始: https://v

Vant 组件库在Vue3的使用

最新发布

weixin_62428445的博客

08-24

756

轻量化：组件平均体积小于 1KB（压缩后）。高质量组件：包含 65+ 个高质量的组件，覆盖移动端主流场景。类型安全：使用 TypeScript 编写，提供完整的类型定义。高测试覆盖率：单元测试覆盖率超过 90%，确保组件稳定性。国际化支持：内置多语言支持，适应全球化开发需求。主题定制：支持主题定制，内置 700+ 个主题变量。无障碍访问：持续改进无障碍访问支持。多种框架支持：除了 Vue 2 和 Vue 3，还支持微信小程序等。

Vue2 组件库之 vant 组件库使用详解

qq_56101688的博客

01-20

6830

van-button type="primary">主要按钮</van-button><van-button type="primary">主要按钮</van-button><van-button type="info">信息按钮</van-button><van-button type="info">信息按钮</van-button>组件库：第三方封装好了很多很多的组件，整合到一起就是一个组件库。Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。// 导入按需导入的配置文件。

vant框架官方链接

qing_xing_的博客

07-14

1524

去百度上百度的vant官网链接都不能用，下面这个链接可以直接跳转到vant官方适用于vue的：https://vant-contrib.gitee.io/vant/#/zh-CN/home 适用于微信小程序的：https://vant-contrib.gitee.io/vant-weapp/#/home

vant的介绍以及使用

akedf的博客

01-02

2052

Vant 是一个，于 2017 年开源。目前 Vant 官方提供了和，并由社区团队维护和。

Vant--移动端组件库

qq_58910023的博客

10-18

554

https://vant-contrib.gitee.io/vant/#/zh-CN/design

vue+vant-UI框架实现购物车的复选框全选和反选功能

10-16

在Vue组件中，我们定义了`shoppingListData`来存储购物车商品列表，以及`selectedData`数组来记录被选中的商品ID，`AllChecked`来表示是否全选状态。 ```javascript data() { return { shoppingListData: { rows...

Vant组件库的三种引用方式

Gik99的博客

03-07

2723

Vant组件库的三种引用方式

前端第三方组件库官网

weixin_67764885的博客

08-16

9920

移动端和pc的组件库

Vant组件库学习-环境搭建

qq_40850266的博客

02-12

1098

1官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN/action-bar 2初始化项目 a 在cmd输入命令vue ui启动可视化界面 vue ui 输入后浏览器会自动打开可视化界面 b点击创建创建项目手动创建预设是很美丽的选择组件选择vue版本创建，这里看个人需要是否创建模板 c 启动项目 d 安装vant组件，起始就是引入依赖使用npm安装 # Vue 3 项目，安装最新版 Vant npm i vant e 第一个

vant官网-vant ui 首页-移动端Vue组件库

m0_59092234的博客

03-03

1万+

Vant 是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用 vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/ 通过 npm 安装在现有项目中使用 Vant 时，可以通过npm或yarn进行安装： # Vue 2 项目，安装 Vant 2： npm i vant -S # Vue 3 项目，安装 Vant 3： npm i vant@next -S vant

Vant 框架官网中文 api 地址

热门推荐

灬Manong 博客

08-02

8万+

Vant 中文api / 小程序直通车 / 其他关联地址

调用网易云Api接口实现移动Web网易云部分功能(搜索+列表+播放）

qq_43372180的博客

06-12

1万+

调用网易云Node.js实现网易云音乐部分功能的实现

vue基础6--vant组件库的基本使用

咖啡壶的博客

12-18

1935

vant组件库的基本使用

vant 文档

weixin_42178050的博客

07-29

3221

https://vant-contrib.gitee.io/vant/#/zh-CN/

vant4 使用vue-cropper移动端头像上传示例代码

08-14

Vant 4 是基于 Vue 的一套移动端轻量级 UI 组件库，而 vue-cropper 是一个用于裁剪图片的组件。如果你想在 Vant 4 中实现移动端头像上传并使用 vue-cropper 进行裁剪，首先需要安装这两个依赖： ```bash npm install vant vant-image-crop @vue/cli-plugin-vuex ``` 然后在项目里引入组件，并在适当的地方使用它： ```html <template> <van-cell v-if="cropping" title="裁剪"> <van-image-crop :src="currentImage" :preview-src="currentImage" :output-width="100" :output-height="100"></van-image-crop> <van-button slot="actions" @click="finishCrop">确定</van-button> </van-cell> </template> <script> import { VanCell, VanImageCrop } from 'vant'; export default { components: { VanCell, VanImageCrop }, data() { return { cropping: false, currentImage: null // 用户选中的原始图片 URL 或者文件路径 }; }, methods: { pickAvatar() { this.$van.camera.open().then((res) => { if (res.type === 'image') { this.currentImage = res.path; this.cropping = true; // 开始裁剪 } }); }, finishCrop() { // 当用户点击确定时，处理裁剪后的图片 // 这里可以将裁剪结果上传至服务器或者保存到本地 console.log('Cropped image:', this.currentImage); this.cropping = false; } } }; </script> ``` 在这个例子中，`pickAvatar` 方法打开相机选择照片，`finishCrop` 方法则是在用户完成裁剪后触发，处理裁剪后的图片。记得根据实际需求替换 `console.log` 和后续的上传逻辑。