当使用Cropper.js在Vue中实现图像裁剪时，需要执行以下步骤：

步骤 1: 安装 Cropper.js 和样式文件

首先，使用npm或yarn命令安装Cropper.js和其对应的样式文件：

npm install cropperjs
yarn add cropperjs
然后，在项目的入口文件中引入Cropper.js和样式文件：
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
步骤 2: 设置 Vue 组件
在Vue组件中，您需要导入所需的Vue函数和Cropper.js：
import { onMounted, reactive, ref } from 'vue';
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';
接下来，您可以设置Vue组件的数据和方法：
<script setup>
  const img = ref(null); // 图片引用
  const res = ref(null); // 裁剪结果引用
  const config = reactive({
    autoCrop: true, // 自动创建裁剪框
    viewMode: 2, // 设置裁剪框可移动和缩放的范围
  const cropper = ref(null); // Cropper.js 实例引用
  onMounted(() => {
    cropper.value = new Cropper(img.value, config); // 创建 Cropper.js 实例
  const crop = () => {
    // 获取裁剪结果（返回裁剪后的图像数据）
    const croppedData = cropper.value.getCroppedCanvas().toDataURL('image/jpeg');
    // 将裁剪结果显示在另一个元素中
    res.value.src = croppedData;
</script>
在模板中，使用ref指令将引用绑定到相应的DOM元素：
<template>
    <img ref="img" id="img" src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg">
  </div>
  <button @click="crop">裁剪</button>
    <img ref="res" id="res">
  </div>
</template>
最后，通过样式设置图像的宽度和高度：
<style scoped>
  img {
    width: 800px;
    height: 500px;
</style>
全部代码如下：
<script setup>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css'
import {onMounted, reactive, ref} from 'vue'
const img = ref(null)
const res = ref(null)
const cropper = ref(null)
const config = reactive({
  autoCrop: true, // 自动创建裁剪框
  viewMode: 2, // 设置裁剪框可移动和缩放的范围
onMounted(() => {
  cropper.value = new Cropper(img.value, config);
const crop = () => {
  // 获取裁剪结果（返回裁剪后的图像数据）
  var croppedData = cropper.value.getCroppedCanvas().toDataURL('image/jpeg');
  // 将裁剪结果显示在另一个元素中
  res.value.src = croppedData;
</script>
<template>
    <img ref="img" id="img" src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg">
  <button @click="crop()"> 裁剪 </button>
    <img ref="res" id="res">
</template>
<style scoped>
img {
  width: 800px;
  height: 500px;
</style>