vue.js是一款流行的javascript前端框架，目前已经推出了最新的版本——vue3，新版vue在性能、体积以及开发体验上均有所提升，受到越来越多的开发者欢迎。本文将介绍如何使用vue3制作一个简单的图片裁剪器。
首先，我们需要创建一个Vue项目并安装所需的插件。可以使用Vue CLI来创建项目，也可以手动搭建。这里我们以使用Vue CLI的方式为例：
# 安装Vue CLI npm install -g @vue/cli # 创建Vue项目 vue create image-cropper # 进入项目文件夹 cd image-cropper # 安装所需插件 npm install vue-cropperjs --save npm 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 = false
new Vue({
render: h => h(App),
}).$mount('#app')上述代码中，我们引入了Vue-Cropperjs插件，并在Vue中调用Vue.use()方法进行注册。需要注意的是，这里我们还引入了Cropperjs的样式文件，以保证图片裁剪器的正常运行。
立即学习“前端免费学习笔记（深入）”；
接下来，我们需要在Vue中创建一个图片裁剪器组件。在src/views目录下新建CropImage.vue文件，添加以下代码：
@@##@@
上述代码中，我们创建了一个名为CropImage的Vue组件，该组件包含了三个主要元素：
系统功能介绍 1 包含企业网站所必备的功能：企业信息、产品管理、人才招聘、新闻资讯、企业图片、以及视频下载等模块2 由于是从CMS系统的基础上开发而成，因此相对于一些其他的企业网站管理系统，本系统具备更强的可扩展能力，可以胜任从小型工作室到大中型企业网上门户等各种不同规模网站的需求。3 后台管理与模板完全分离，并具备非常灵活的标签技术，可以实现无限制个性化的界面定制4 操作简单，利用已经制作好的模
- 图片容器
- 图片上传按钮
- 图片裁剪器
通过img标签和一个div标签，我们创建了一个最初的图片容器。用户可以点击“上传”按钮选择一张图片进行裁剪。当用户选择图片后，我们使用FileReader将图片转换为base64编码，并将其赋值给src属性，以实现图片的预览。
图片裁剪器使用了Vue-Cropperjs插件中提供的vue-cropper标签，它支持多种属性来控制裁剪器的表现，例如：auto-crop-area控制自动裁剪的区域比例、guides控制是否显示裁剪框辅助线、view-mode控制裁剪器的模式等等。此外，我们还将裁剪框的移动模式设置为“移动”，确保用户能够更好地操作裁剪框。
裁剪按钮被绑定到了onCrop方法，该方法将图片裁剪后的base64编码输出到控制台，开发者可根据实际需求改写此方法。
最后我们需要在App.vue文件中引入CropImage.vue组件。修改src/App.vue文件如下：
上述代码中，我们将CropImage组件引入到App.vue文件中，并在组件标签中通过props传递参数，实现图片裁剪器的初始化。
至此，我们已经完成了一个简单的图片裁剪器的制作，可以正常运行并进行裁剪。当然，这只是一个入门实例，初学者可以通过对代码的修改和扩展，来进一步理解Vue3的使用和开发技巧。
