前端工作中，经常需要图片裁剪的场景，cropper.js是一款优秀的前端插件，api十分丰富。
本文是在vue-cli项目下封装图片裁剪插件，效果图如下：
话不多说，看步骤吧。
第一步：准备开发环境
cropper.js是基于jquery的，所以要先安装jquery
执行命令：
npm install --save-dev jquery cropper
为webpack配置添加jquery的映射
修改webpack.base.conf.js配置，添加标红的一行
第二步：新建图片裁剪组件
index.vue内容：
由于用了element-ui,其中布局就引用了element-ui的组件
template:
style:
script:
第三步：父组件引用子组件
用了element-ui中的 el-dialog组件，此时el-dialog组件为父组件
在父组件中引入子组件
template:
script：
本文结合element-ui，vue-cli,jquery,cropper.js,实现裁图组件的封装，先写到这啦，如果对你有帮助，还请点个赞噢！
