vue-admin-template开发（头像上传功能）

vue-admin-template开发（头像上传功能）

vue-admin-template是一个后台管理系统的前端框架，提供了登录、导航栏、路由等功能，是一个强大简洁的后台管理系统的前端框架。本文将讲述在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱。

锁定头像上传功能

我们以vue-element-admin的头像上传为例，简单描述如何将头像上传功能移植进入到vue-admin-template中

锁定头像上传功能代码

首先在浏览器导航栏拿到组件路由：/components/avatar-upload，拿着这个路径到src/router/index.js找

在路由表index.js文件中我们能看到以下线索

./modules/components，这个线索提示了我们components组件在当前目录下的./modules/components.js中

在components.js中我们找到了avatar-upload组件线索，avatar-upload组件对应的Vue代码实现在@/views/components-demo/avatarUpload.vue中

头像上传功能实现效果图

在我个人的项目中，我需要把头像上传功能添加进入讲师管理中的添加讲师功能中。

移植功能

1）添加template代码

2）解决控制台报错问题

这时控制台一共报了9个错误，这些问题的原因在于：我们只移植了template代码，还需要声明变量、方法之类的。接下来我们依次分析问题，一一解决。

解决办法

解决问题的办法在于对照着vue-element-admin项目中的avatarUpload.vue文件，将变量、方法添加进入vue-admin-template项目中的form.vue文件

问题1

该问题表示imagecropperShow变量未声明

问题2

该问题表示imagecropperKey变量未声明

在文件下边的js代码块中，在data()中添加imagecropperShow、imagecropperKey变量声明

问题3

该问题表示close()方法未声明

问题4

该问题表示cropSuccess()方法未声明

在文件下边的js代码块中，在methods:中添加close()方法、cropSuccess()方法声明

问题5

该问题表示模块未找到

问题6

该问题表示模块未找到

导入模块操作1-添加模块文件夹

导入ImageCropper和PanThumb模块，这两个模块是从vue-element-admin中拷贝过来的。

导入模块操作2-添加代码

在文件下边的js代码块中，在下导入ImageCropper和PanThumb模块，在export default 中进行模块声明

问题7

该问题表示close()方法未声明

问题8

该问题表示cropSuccess()方法未声明

问题7和问题8在解决问题3和问题4时一并解决，在解决问题3和问题4时已经声明了close()、cropSuccess()方法

功能实现

经过上面的8个问题的排查，我们成功将控制台中的问题都已经解决，这时候可以看到头像上传功能成功移植。

总结

vue-admin-template是一个能够方便我们开发的后台管理系统的前端框架。经过以上的功能移植流程分析和总结，在接下来的开发中我能够规避大部分的问题。感谢你的阅读，希望这篇文章能对你有小小的帮助。我是黑马Jack，一起学习一起进步！