目录

• 前言：
• 具体实现思路：
• 步骤：
• • 1. 展示美食杰发布菜谱页效果
  • 2. 引入element-ui
  • 3. 代码
• 总结：

前言：

本文给大家讲解，美食杰项目中 实现发布菜谱页的效果，和具体代码。

具体实现思路：

1. 按照效果图实现静态页面布局
2. 可以使用element-ui框架
3. 实现上传图片功能
4. 默认为3个可以增加，删除，最少为1个
5. 点击提交，成功发布菜谱

步骤：

1. 展示美食杰发布菜谱页效果

美食杰发布菜谱

2. 引入element-ui

点击跳转至 element-ui 中 Upload 上传使用方法：https://element.eleme.cn/#/zh-CN/component/upload

点击跳转至 element-ui 中 input 输入框使用方法：https://element.eleme.cn/#/zh-CN/component/input

点击跳转至 element-ui 中 Select 选择器使用方法：https://element.eleme.cn/#/zh-CN/component/select

3. 代码

element-ui 中 Upload 上传 功能要单独封装一个组件，因为它还需要在编辑个人资料页面中使用
其他的在代码中写有注释，按注释理解即可，不了解的也可以在评论区里问我，或者私聊我询问
上传功能实现代码在编辑个人资料页中 点击跳转至编辑个人资料页

• 主页面

• input框页

总结：

以上就是 美食杰项目 中 发布菜谱页的具体实现方法，不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog