这个项目是高仿饿了么，技术栈选用

vue1 + vue-router1 + vue-cli1 + vue-resource + stylus + flex布局 + es6 + eslint + webpack2

页面相对简单，所以没有用到vuex， 它更适合对复杂的单页面进行状态管理。

1.项目结构分析

common/---- 文件夹存放的是通用的css和fonts
components/----文件夹用来存放我们的 Vue 组件
router/----文件夹存放的是vue-router相关配置（linkActiveClass,routes注册组件路由）
build/----文件是 webpack 的打包编译配置文件
config/----文件夹存放的是一些配置项，比如我们伺服器访问的埠配置等
dist/----该文件夹一开始是不存在，在我们的项目经过 build 之后才会产出
prod.server.js----该文件是测试是模拟的伺服器配置，用来运行dist里面的文件，在config/index.js中,build对象中添加一条埠设置port：9000，
App.vue----根组件，所有的子组件都将在这里被引用，eventHub空实例是用来组件间通信的中央数据汇流排作用，主要连接购买控制项和购物车组件之间的数据通信
index.html----整个项目的入口文件，将会引用我们的根组件 App.vue
main.js----入口文件的 js 逻辑，在 webpack 打包之后将被注入到 index.html 中

2.开发过程问题汇总

  • 图标icon.css--文字图标样式，通过icommon.io网站 将svg图片转成文字图标样式
  • 一像素边框问题，当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx，2Npx.为保设计稿还原度,解决就是用media + scale.

公式：设备上像素 = 样式像素 * 设备像素比
屏幕宽度： 320px 480px 640px
屏幕宽度： 320px 480px 640px
设备像素比： 1 1.5 2

  • header组件的详情页采用sticky-footer布局，主要特点是如果内容不够长，页脚部分也会贴在视窗底部，内容足够长，就会将页脚推到内容底部，父级position:fixed,内容设为padding-bottom:64px，页脚相对定位，margin-top:-64px
  • 大多采用flex布局
  • filter：blur(10px),注意，所有在内的子元素也会模糊，包括文字，所以采用定位布局，背景单独占用一个层，ios有一个设置backdrop-filter:blur(10px)，只会模糊背景,但不支持android
  • 在购买控制项中使用transition过渡效果，实现添加减少按钮的动效，和小球飞入购物车的动效（模仿贝塞尔曲线的效果）
  • css预处理器--stylus
  • eslint各种报错，各种揪心，不过这也是个学习的过程
  • vue2相较vue1有很多地方改动

1.v-for的书写格式，多出：key值，而且必须写
2.transition书写格式不在是在元素标签上写，而是作为一个标签<transition></transition >将目标元素包起来,过渡状态变为4种状态
3.v-el 和 v-ref 都弃用，改为使用ref属性为元素或组件添加标记，通过$refs获取

  • vue-router2 和vue-router1也有一些区别，可以上官网对比看看

3.学习参考

  • vue2.0官网： vuefe.cn/v2/guide/
  • webpack官网：webpack
  • vue-resoure官网：pagekit/vue-resource
  • vue-router官网：vuejs/vue-router
  • better-scroll插件使用：github.com/ustbhuangy
  • stylus： stylus中文文档 &amp;quot; 综述 &amp;quot; 张鑫旭-鑫空间-鑫生活
  • es6：ECMAScript 6入门
  • Sticky footers：CSS秘密花园： Sticky footers
  • 设备像素比：设备像素比devicePixelRatio简单介绍 &amp;quot; 张鑫旭-鑫空间-鑫生活
  • Flex弹性布局：Flex 布局教程：语法篇 - 阮一峰的网路日志
  • localStorage本地存储：localStorage使用总结 - 谢灿勇 - 博客园
  • 模仿贝塞尔曲线的效果： cubic-bezier.comcubic-bezier.com
  • eslint官网：ESLint - Pluggable JavaScript linter
  • cssreset官网： 2015&amp;#x27;s most common CSS Resets to copy/paste, with documentation / tutorials

备注：

  • 项目github源码地址:github.com/ustbhuangyi/
  • 项目演示：sell
  • 本文参考：仿饿了么项目-vue的学习笔记总目录 - Keep Learning - SegmentFault
  • 课程视频：Vue.js高仿饿了么外卖App （想要的，可留下邮箱，在下会分享给你的~~）

推荐阅读：

相关文章