用vue实现美食杰项目---编辑个人资料，傻瓜式教程，看了就会！！！

一.项目介绍：

上一篇介绍了美食杰项目的登录页面，这篇我们来介绍一下登录之后的编辑个人资料页面，感兴趣的一起来看看吧！！！

1.首先点击个人跳转到空间，然后点击编辑个人资料就会跳转到我们今天要介绍的页面。

2.技术线如下：

        配置路由

        设置图片的最大宽度，尺寸大小

        请求接口参数

        上传图片，图片展示

        渲染页面

3.要用到的组件有：Element ui

安装方法如下：

  

二.效果展示：

 

 

 

 三.代码展示：

1.视图代码：

edit.vue:

<template>
  <div class="edit">
    <div class="edit-item">
      <span class="label">修改头像</span>
      <upload-img
        imgMaxWidth="210"
        action="/api/upload?type=user"
        :imageUrl="avatar"
        @res-url="data[(avatar = data.resImgUrl)]"
      ></upload-img>
    </div>
    <div class="edit-item">
      <span class="label">修改名称</span