第一章
学习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
网友评论