Vue实战——外卖商家页面 项目准备工作

我会带着你远行 2021-07-25 12:48 509阅读 0赞

在这里插入图片描述

QQ 1285575001
Wechat M010527
技术交流 QQ群599020441
纪年科技aming

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

资源准备

在这里插入图片描述

  • mkm 页面字体 大小 颜色 尺寸 区块 标注

在这里插入图片描述
在这里插入图片描述在这里插入图片描述

  • 图片 尺寸 场景
    在这里插入图片描述在这里插入图片描述

  • 切成单图

    • 2x 3x 移动端
    • DPR设备像素比 显示力度 逼真度
      在这里插入图片描述
  • css 拼图 合成 减少数量 性能优化
  • webpack css打包 无png
    在这里插入图片描述
  • svg 色彩单一 ——-> 图标字体文件

在这里插入图片描述

图标字体 制作

在这里插入图片描述在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

项目 目录 结构设计

在这里插入图片描述
Vue大组件

  • 目录结构
  • 组件 就近维护

在这里插入图片描述

  • styles 类似于 css预处理器 less
    在这里插入图片描述在这里插入图片描述在这里插入图片描述
  • 把css文件 更改 styl语法
    ｛｝ ； 去掉

在这里插入图片描述

  • 前后端 联调 分离
  • 模拟数据
    在这里插入图片描述在这里插入图片描述
  • 设计内容 根据 功能 数据表 添加数据
  • 模拟 数据字段
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
  • 定义路由
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，509人围观）

还没有评论，来说两句吧...

相关阅读

    相关 VUE准备工作

    1.了解vue简单历程，组成部分    Vue是一个构建数据驱动的web界面的渐进式框架，采用自底向上增量开发的设计。VUe.js的目标是通过尽可能简单的API实现响应的数据

    柔光的暖阳◎柔光的暖阳◎/ 0 赞/ 218 阅读