Vue前端实战——外卖商家-CFANZ编程社区

Vue前端实战——外卖商家

项目页面准备工作

设计师 ----->设计稿件 ---->前端
头部（展示浮层）
内容区（窗口评价商家详情页）
页面切换 html单页面
展示浮层（关闭）
商品页左右分类商品列表
滚动区块分类高亮联动
底部购物车
添加商品联动效果
商品详情浮层自适应
勾选评论区变化

资源准备

Vue前端实战——外卖商家_vue.js_02

Vue前端实战——外卖商家_前端_03

Vue前端实战——外卖商家_javascript_04 Vue前端实战——外卖商家_数据_05

图片尺寸场景
Vue前端实战——外卖商家_css_06 Vue前端实战——外卖商家_数据_07

切成单图

2x 3x 移动端
DPR设备像素比显示力度逼真度

css 拼图合成减少数量性能优化

webpack css打包无png
Vue前端实战——外卖商家_数据_09

svg 色彩单一 -----> 图标字体文件

Vue前端实战——外卖商家_数据_10

图标字体制作

Vue前端实战——外卖商家_javascript_11 Vue前端实战——外卖商家_数据_12 Vue前端实战——外卖商家_前端_13

Vue前端实战——外卖商家_数据_14

Vue前端实战——外卖商家_前端_15 Vue前端实战——外卖商家_前端_16 Vue前端实战——外卖商家_前端_17

项目目录结构设计

Vue前端实战——外卖商家_数据_18

Vue大组件

目录结构
组件就近维护

Vue前端实战——外卖商家_数据_19

styles 类似于 css预处理器 less
把css文件更改 styl语法
｛｝；去掉

Vue前端实战——外卖商家_数据_23

前后端联调分离
模拟数据
设计内容根据功能数据表添加数据
模拟数据字段
定义路由

页面骨架开发

bar组件 header 导航区
Vue前端实战——外卖商家_vue.js_45

包含三个区块

route 来切换
Vue前端实战——外卖商家_数据_46

css reset
Vue前端实战——外卖商家_javascript_47

Vue页面骨架—— 组件拆分

页面整体设计—>根据切图组件拆分（组件化开发）

Vue前端实战——外卖商家_数据_48

Vue前端实战——外卖商家_前端_49 整体组件

header组件

导航组件

Vue前端实战——外卖商家_前端_50

并添加自定义样式

Vue前端实战——外卖商家_数据_52 Vue前端实战——外卖商家_数据_53

Vue前端实战——外卖商家_css_54 Vue前端实战——外卖商家_vue.js_55

eslink 不能用分号强加分号

Vue前端实战——外卖商家_javascript_56 Vue前端实战——外卖商家_css_57 Vue前端实战——外卖商家_前端_58 Vue前端实战——外卖商家_javascript_59 Vue前端实战——外卖商家_css_60 Vue前端实战——外卖商家_javascript_61 Vue前端实战——外卖商家_javascript_62 Vue前端实战——外卖商家_javascript_63 Vue前端实战——外卖商家_vue.js_64 Vue前端实战——外卖商家_css_65 Vue前端实战——外卖商家_前端_66 Vue前端实战——外卖商家_javascript_67 Vue前端实战——外卖商家_vue.js_68

Vue前端实战——外卖商家_数据_69 Vue前端实战——外卖商家_vue.js_70 Vue前端实战——外卖商家_vue.js_71

Vue前端实战——外卖商家_javascript_72 Vue前端实战——外卖商家_数据_73 Vue前端实战——外卖商家_javascript_74 Vue前端实战——外卖商家_vue.js_75 Vue前端实战——外卖商家_javascript_76

先注册
冲突

Vue页面骨架——vue-router

Vue前端实战——外卖商家_javascript_103 Vue前端实战——外卖商家_数据_104

Vue前端实战——外卖商家_前端_105 Vue前端实战——外卖商家_前端_106 Vue前端实战——外卖商家_css_107 Vue前端实战——外卖商家_javascript_108 Vue前端实战——外卖商家_css_109 Vue前端实战——外卖商家_前端_110 Vue前端实战——外卖商家_数据_111 Vue前端实战——外卖商家_前端_112 Vue前端实战——外卖商家_css_113 Vue前端实战——外卖商家_数据_114 Vue前端实战——外卖商家_vue.js_115 Vue前端实战——外卖商家_前端_116 Vue前端实战——外卖商家_vue.js_117 Vue前端实战——外卖商家_数据_118

Vue前端实战——外卖商家_vue.js_119

Vue前端实战——外卖商家_css_120 Vue前端实战——外卖商家_vue.js_121 Vue前端实战——外卖商家_前端_122 Vue前端实战——外卖商家_前端_123 Vue前端实战——外卖商家_数据_124 Vue前端实战——外卖商家_数据_125 Vue前端实战——外卖商家_css_126 Vue前端实战——外卖商家_前端_127 Vue前端实战——外卖商家_vue.js_128

Vue前端实战——外卖商家_前端_129 Vue前端实战——外卖商家_css_130 Vue前端实战——外卖商家_css_131 Vue前端实战——外卖商家_vue.js_132 Vue前端实战——外卖商家_数据_133 Vue前端实战——外卖商家_vue.js_134

Vue前端实战——外卖商家_前端_135 Vue前端实战——外卖商家_css_136 Vue前端实战——外卖商家_vue.js_137 Vue前端实战——外卖商家_vue.js_138 Vue前端实战——外卖商家_vue.js_139 Vue前端实战——外卖商家_javascript_140 Vue前端实战——外卖商家_vue.js_141 Vue前端实战——外卖商家_数据_142 Vue前端实战——外卖商家_css_143 Vue前端实战——外卖商家_vue.js_144 Vue前端实战——外卖商家_css_145 Vue前端实战——外卖商家_前端_146

Vue前端实战——外卖商家_前端_147 Vue前端实战——外卖商家_css_148

像素border实现

Vue前端实战——外卖商家_前端_149 Vue前端实战——外卖商家_数据_150 Vue前端实战——外卖商家_javascript_151 Vue前端实战——外卖商家_数据_152 Vue前端实战——外卖商家_javascript_153

Vue前端实战——外卖商家_javascript_154 Vue前端实战——外卖商家_javascript_155 Vue前端实战——外卖商家_vue.js_156 Vue前端实战——外卖商家_vue.js_157 Vue前端实战——外卖商家_javascript_158 Vue前端实战——外卖商家_vue.js_159 Vue前端实战——外卖商家_数据_160 Vue前端实战——外卖商家_css_161 Vue前端实战——外卖商家_javascript_162 Vue前端实战——外卖商家_vue.js_163 Vue前端实战——外卖商家_css_164 Vue前端实战——外卖商家_css_165