cropperjs是一個輕量級的JavaScript圖像剪裁工具，它支持縮放、裁剪、旋轉等操作，可輕松定制裁剪區域的比例、大小和位置。Vue是一款流行的前端框架，它提供了很好的組件化和數據驅動的開發方式。將Vue和cropperjs結合使用，可以非常方便地實現圖像剪裁功能。

下面是一個使用Vue和cropperjs的實例：

<template>
<div>
<img ref="image" src="./image.jpg" alt="image">
</div>
</template>
<script>
import Cropper from 'cropperjs';
export default {
mounted() {
const image = this.$refs.image;
const cropper = new Cropper(image, {
aspectRatio: 16 / 9,
viewMode: 1,
zoomable: false,
crop(event) {
console.log(event.detail.x);
console.log(event.detail.y);
console.log(event.detail.width);
console.log(event.detail.height);
console.log(event.detail.rotate);
}
});
}
};
</script>

在這個實例中，我們首先引入了cropperjs庫，并在mounted生命周期函數中實例化Cropper對象。這個對象將被綁定到一個ref為“image”的img元素上。

在Cropper的配置中，我們可以指定crop框的比例、視圖模式、是否可縮放等。此外，我們還定義了一個crop事件，在每次剪裁操作完成后打印出剪裁框的坐標、尺寸和旋轉角度。

在實際開發中，我們可以在組件中使用這個實例，通過調用cropper對象的方法，動態改變剪裁框的大小、位置和比例等，從而實現更加靈活的圖像剪裁效果。