前面我“手把手”教大家开发了基于 Vue2 的管理系统，有很多人说 vue2 早就过时了，都 22 年了竟然还有人在用 vue2？简直就是土老帽！

TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue 2 和 Vue 3，支持 PC 端和移动端。今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue。

1. 组件的设计与实现。 2. 组件库的搭建，打包及发布。 3. 组件文档的编写，以及组件库文档站点的搭建与发布。

在cropperBox.vue中写入以下内容,(finishCropImage方法中的blob的数据格式请自行选择以下两种，第一种是blob，第二种是普通文件方式。)

一款vue图片旋转、缩放、裁剪组件。兼容移动和pc端。包括图片预览/单指拖动/双指缩放/双指旋转/鼠标拖动/鼠标滚轮缩放/鼠标单击旋转和长按旋转/图片裁剪输出等。 简单方便，皮实易用，解决项目中的头像

可选上传地址，剪裁比例，图片框大小，多图单图等....

上传一个封面图，在上传之前需要对图片进行裁剪，上传裁剪之后的图片，类似微信的上传头像。 上传肯定是用element的 el-upload 组件实现上传，非常方便，各种钩子函数。 裁剪一开始找的 cropper 看着功能到是非常齐全，api也比较丰富，基本是符合预期的需求的。但是…

背景 vue-cropper是一款基于vue的优雅图片裁剪插件，可用来实现头像等功能。 效果图 安装使用 安装 npm install vue-cropper // npm 安装 yarn add v

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。在vue项目中使用vue-cropper实现图片裁剪功能