首先，我们需要创建一个vue项目并安装所需的插件。可以使用vue cli来创建项目，也可以手动搭建。这里我们以使用vue cli的方式为例：
# 安装vue clinpm install -g @vue/cli# 创建vue项目vue create image-cropper# 进入项目文件夹cd image-cropper# 安装所需插件npm install vue-cropperjs --savenpm install cropperjs --save
vue-cropperjs是用于裁剪图片的插件，而cropperjs则是vue-cropperjs的核心库，需要一起安装。
接下来，我们需要在vue项目中引入vue-cropperjs插件。修改src/main.js文件如下：
import vue from 'vue'import app from './app.vue'import vuecropper from 'vue-cropperjs'import 'cropperjs/dist/cropper.css'vue.use(vuecropper)vue.config.productiontip = falsenew vue({ render: h => h(app),}).$mount('#app')
上述代码中，我们引入了vue-cropperjs插件，并在vue中调用vue.use()方法进行注册。需要注意的是，这里我们还引入了cropperjs的样式文件，以保证图片裁剪器的正常运行。
接下来，我们需要在vue中创建一个图片裁剪器组件。在src/views目录下新建cropimage.vue文件，添加以下代码：
<template> <div> <div ref="wrapper"> <img ref="img" :src="src" style="max-width: 100%;" /> </div> <div> <input type="file" @change="onupload" /> </div> <div> <vue-cropper ref="cropper" :src="src" :auto-crop-area="0.5" :guides="false" :view-mode="1" :drag-mode="dragmode" :crop-box-movable="false" :crop-box-resizable="false" :crop-box-border-radius="50"></vue-cropper> </div> <div> <button @click="oncrop">裁剪</button> </div> </div></template><script>export default { name: 'cropimage', data() { return { src: '', cropper: null, dragmode: 'move' } }, methods: { onupload(e) { const file = e.target.files[0] if (file.type.match(/image.*/)) { const reader = new filereader() reader.onload = (event) => { this.src = event.target.result } reader.readasdataurl(file) } }, oncrop() { const canvas = this.$refs.cropper.getcroppedcanvas({ width: 100, height: 100 }) const dataurl = canvas.todataurl() console.log(dataurl) } }}</script>
上述代码中，我们创建了一个名为cropimage的vue组件，该组件包含了三个主要元素：
图片容器图片上传按钮图片裁剪器通过img标签和一个div标签，我们创建了一个最初的图片容器。用户可以点击“上传”按钮选择一张图片进行裁剪。当用户选择图片后，我们使用filereader将图片转换为base64编码，并将其赋值给src属性，以实现图片的预览。
图片裁剪器使用了vue-cropperjs插件中提供的vue-cropper标签，它支持多种属性来控制裁剪器的表现，例如：auto-crop-area控制自动裁剪的区域比例、guides控制是否显示裁剪框辅助线、view-mode控制裁剪器的模式等等。此外，我们还将裁剪框的移动模式设置为“移动”，确保用户能够更好地操作裁剪框。
裁剪按钮被绑定到了oncrop方法，该方法将图片裁剪后的base64编码输出到控制台，开发者可根据实际需求改写此方法。
最后我们需要在app.vue文件中引入cropimage.vue组件。修改src/app.vue文件如下：
<template> <div id="app"> <cropimage /> </div></template><script>import cropimage from './views/cropimage.vue'export default { name: 'app', components: { cropimage }}</script><style> #app { max-width: 640px; margin: 0 auto; padding: 20px; }</style>
上述代码中，我们将cropimage组件引入到app.vue文件中，并在组件标签中通过props传递参数，实现图片裁剪器的初始化。
至此，我们已经完成了一个简单的图片裁剪器的制作，可以正常运行并进行裁剪。当然，这只是一个入门实例，初学者可以通过对代码的修改和扩展，来进一步理解vue3的使用和开发技巧。
以上就是vue3入门实例：制作一个简单的图片裁剪器的详细内容。