2018-07-18 Vue.js高仿饿了么(1-4)

第一章

学习vue.js: 当前最火的MVVM框架
数据驱动、组件化、轻量、简洁、高效


  • 需求分析
  • 脚手架工具
  • 数据mock
  • 架构设计
  • 代码编写
  • 自测
  • 编译打包

线上开发及测试环节
1.UI标注
2.真实数据演示

代码规范
1.架构设计
2.组件抽象
3.模块拆分
4.代码风格统一
5.JS变量命名规范
6.CSS代码规范

功能技术分析
与后端交互:vue-resource
前端单页应用:vue-router
第三方js库:better-scroll
最大程度组件化
html5的localstorage
图标字体的使用
移动1像素边框
css sticky footer布局
flex弹性布局
ES6

学习目标

  • 掌握vue.js在实战中的运用
  • 学会使用Vue.js完整地开发移动端App
  • 学会组件化、模块化地开发方式

学习内容

  • Vue.js框架介绍
  • Vue-cli 脚手架 搭建基本代码框架
  • Vue-router 官方推荐的路由
  • Vue-resource Ajax通信
  • webpack 构建工具
  • es6 + eslint eslint:es6代码风格检查工具

工程化、组件化、模块化、移动端常用开发技巧、flex弹性布局、css stickyfooter、交互设计

第二章

近年来前端开发趋势,旧浏览器被逐渐淘汰,移动端需求增加
ie6-ie8不支持ES5特性
IE9、chrome、Safari、Firefox支持ES5特性
前端交互越来越多,功能越来越复杂
架构从传统后台MVC向REST API+前端MV※迁移
MV※:MVC、MVP、MVVM(<--- Vue.js)

MVVM框架
View | 视图 | DOM
ViewModel | 通讯 | 观察者
Model | 数据 | javascript对象

针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化,保证前端用户体验

Vue.js 尤 2014年开源
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发
Github超过25k+的star,社区完善 https://cn.vuejs.org/

技术选型
Vue.js更轻量,gzip后大小只有20k+
Vue.js更易上手,学习曲线平稳
吸收了两家之长,借鉴了angular的指令和react的组件化

数据驱动
DOM是数据的一种自然映射
数据响应原理:数据(model)改变驱动视图(view)自动更新

组件化
扩展HTML元素,封装可重用的代码
组件设计原则:
页面上每个独立的可视、可交互区域视为一个组件
每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套

第三章

Vue-cli是Vue的脚手架工具:目录结构、本地调试、代码部署、热加载、单元测试

node版本4以上,较稳定

node -v

mac下要sudo,Windows不用

sudo npm install -g vue-cli

看有没有安装:

vue

看可用的模板:

vue list

如果出问题,可能是node版本太低导致

vue init webpack sell

sell是取的名字

cd sell
ls
npm install
cd ..  //回到主目录
npm run dev

ls不是内部或外部命令的解决方法:
https://blog.csdn.net/zl544434558/article/details/18618483

src文件夹放源码
static放第三方静态资源

  • eslintignore:忽略语法检查的目录文件
  • eslintrc.js:
    eslint的配置文件

格式的规则:
https://github.com/standard/standard/blob/master/RULES.md#javascript-standard-style

webpack
modules with dependencies ---> static assets

第四章

需求分析:spa的单页应用

dpr 设备像素比
移动端一般都需要切2x图 3x图 以适应不同屏幕

图标字体制作
icomoon

后台数据模拟:https://blog.csdn.net/qq_34645412/article/details/78833860

google的jsonview插件可以格式化json

第五章

组件拆分
flex布局
vue-loader依赖了postcss插件,它会搞定css兼容问题

ipconfig看ip
cli.im的网站生成二维码
前提:手机与电脑连着同一个局域网

sticky footer
<div v-show="detailShow" class="detail">
<div class="detail-wrapper clearfix">
<div class="detail-main"></div>
</div>
<div class="detail-close">
<i class="icon-close"></i>
</div>
</div>

.detail
position: fixed
top: 0
left: 0
z-index: 100
width: 100%
height: 100%
overflow: auto
background: rgba(7, 17, 27, 0.8)
.detail-wrapper
min-height: 100%
.detail-main
margin-top: 64px
padding-bottom: 64px
.detail-close
position: relative
width: 32px
height: 32px
margin: -64px auto 0 auto
clear: both
font-size: 32px
.clearfix
display: inline-block
&:after
display: block
content: '.'
height: 0
line-height: 0
clear: both
visibility: hidden

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容