目录

• 前言
• 具体效果
• 实现的具体功能
• 代码思路
• 主要引入的element ui的具体样式
• 相关代码
• 总结：

前言

• 本节给大家讲的是美食杰项目的发布菜谱的主要功能和具体样式，希望我的代码能够帮助到你，也希望你能够看懂

具体效果

实现的具体功能

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

代码思路

主页面完成具体的样式，可以看element ui的具体框架来实现具体样式
根据选项来实现具体口味和烹饪方法
将主料辅料功能实现组件化封装
将上传图片进行组件化封装
将选的具体数据传给接口实现发布菜谱 

主要引入的element ui的具体样式

点击这里跳转到的element ui上传图片的具体样式和使用
点击这里跳转到的element ui中input的具体样式和使用
点击这里跳转到的element ui中select的具体样式和使用

相关代码

由于前面将编辑资料的时候说过上传图片的具体功能和样式，如果想要了解编辑资料可以
点击这里跳转到编辑个人资料页面看上传图片的样式

• 主页面为总组件发布菜谱的主要功能都在这里面所以代码有点多、主页面的相关代码：

• input输入框为主料辅料的具体代码由于他是封装起来的所以单独实现、input输入框的具体代码

总结：

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