135百度盘
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第1章 课程导学(二期)
1-1 倒学--更多资源q3190343277.mp4
Vue2.5高仿开发饿了么 App
做什么?
开发体验媲美原生APP的饿了么商家页面哪些内容?
商品列表页、评价页面、商家页面、各种组件技术栈?
Vue.js 2.5.17,Vue-CLI 3.0,Cube-UI
CubeUi QUI
学会使用Vue.js开发WebApp应用
学会组件化、模块化的方式
学会使用第三方组件库辅助我们的开发
学会项目的部署构建过程
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第2章 项目准备工作(二期
2-1 Vue-cli 3.0 介绍--更多资源q3190343277.mp4
https://github.com/vuejs/vue-cli
vue --version 3.0.1
vue create vue-sell-cube
2-2 目录介绍 & cube-ui 安装--更多资源q3190343277.mp4
2.5.17 vue stylus
render 恋的
https://github.com/didi/cube-ui cubeUI 2017
https://didi.github.io/cube-ui/#/zh-CN 基于 Vue.js 实现的精致移动端组件库
添加插件 vue add cube-ui
use post-compile y 后编译 源码 减少体积
后编译指的是应用依赖的 NPM 包并不需要在发布前编译,而是随着应用编译打包的时候一块编译。
2-3 api 接口 mock--更多资源q3190343277.mp4
/api/goods
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第3章 头部组件开发(二期)
3-1 目录结构 & header 组件--更多资源q3190343277.mp4
老师不code 同步不code 看看 jdg
项目再同步
3-2 axios 封装 & 数据获取--更多资源q3190343277.mp4
https://github.com/axios/axios
axios 唉 x 楼
npm i axios --save
钩子函数 生命周期
3-3 header-detail & star 组件--更多资源q3190343277.mp4
3-4 header-detail 交互--更多资源q3190343277.mp4
蒙版
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第4章 Tab 组件开发(二期)
4-1 tab 组件基础实现--更多资源q3190343277.mp4
https://vue-loader.vuejs.org/zh/guide/scoped-css.html#子组件的根元素 >>>
修改子组件样式
4-2 tab 组件上下联动--更多资源q3190343277.mp4
4-3 tab 组件抽象和封装--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第5章 商品页面开发(二期)
5-1 scroll-nav 组件应用--更多资源q3190343277.mp4
5-2 shop-cart 组件--更多资源q3190343277.mp4
5-3 cart-control 组件--更多资源q3190343277.mp4
5-4 小球飞入动画实现--更多资源q3190343277.mp4
https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-钩子
JavaScript 钩子
可以在 attribute 中声明 JavaScript 钩子
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
5-5 侧边栏内容定制化--更多资源q3190343277.mp4
5-6 购物车列表组件--更多资源q3190343277.mp4
5-7 购物车 sticky 组件--更多资源q3190343277.mp4
grid good d
sticky s踢k
:bind=xxx / :bind="xxx"
5-8 购物车列表功能完善--更多资源q3190343277.mp4
5-9 弹层类组件优化--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第6章 商品详情页开发(二期)
6-1 商品详情页骨架开发--更多资源q3190343277.mp4
6-2 商品详情页购物开发--更多资源q3190343277.mp4
6-3 商品详情页评价列表开发--更多资源q3190343277.mp4
插件时间 https://github.com/moment/moment
momentjs.com
6-4 商品详情页评价选择组件开发--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第7章 评价和商家页面开发(二期)
7-1 评价页面骨架开发和数据获取--更多资源q3190343277.mp4
7-2 评价页面评价选择组件 mixin 抽取--更多资源q3190343277.mp4
data methods computed 都可以mixins
7-3 商家页面静态页面开发--更多资源q3190343277.mp4
7-4 商家页面本地缓存封装实现--更多资源q3190343277.mp4
https://github.com/sindresorhus/query-string
https://github.com/ustbhuangyi/storage
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\08create-api 原理分析(二期)
08-1 create-api 原理介绍.mp4
08-2 create-api 源码分析(1).mp4
https://github.com/cube-ui/vue-create-api
08-3 create-api 源码分析(2).mp4
x=x=x 多等多使用
08-4 create-api 源码分析(3).mp4
08-5 create-api 源码分析(4).mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\09打包构建和项目部署(二期)
09-1 打包构建&性能优化.mp4
npm run report
vue-cli-service report可视化看大小
http://ustbhuangyi.com/music/#/rank
python -m SimpleHTTPServer 8088
按需加载 删除其他语言moux
09-2 搭建小型 node 服务代理接口.mp4
09-3 部署到云服务器.mp4
09-4 nginx 配置多项目部署方案.mp4
nginx转发端口访问
source /etc/profile 环境变量 改生效
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第10章 课程总结(二期)
10-1 课程总结--更多资源q3190343277.mp4
课程总结
学会使用第三方插件辅助我们的开发
遇到问题 先github-issue 文档 再百度问人
学会组件化、模块化的开发思想
学会主动学习
进阶学习-音乐课程,源码课程
源码https://ustbhuangyi.github.io/vue-analysis/
19 vue3
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第11章 课程简介(一期)
11-1 课程简介--更多资源q3190343277.mp4
11-2 课程安排--更多资源q3190343277.mp4
组件化模块化 拆分结构 搭积木 提高可维护性可扩展性
学习目标
掌握Vue.js在实战中的运用
学会使用Vue.js完整地开发移动端App
学会组件化、模块化的开方式
vue-resource Ajax通信
Webpack构建工具
es6 + eslint eslint:es6代码风格检查工具
工程化
组件化
模块化
移动端常用开发技巧
flex弹性布局
css stickyfooter
酷炫的交互设计
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第12章 Vuejs介绍(一期)
12-1 Vuejs介绍-近年来前端开发趋势--更多资源q3190343277.mp4
近年来前端开发趋势
旧浏览器逐渐淘汰,移动端需求增加
前端交互越来越多,功能越来越复杂
架构从传统后台MVC向REST API+前端MV*迁移
MVC MVP MVVM
vue=>MVVM
12-2 Vuejs介绍-MVVM框架--更多资源q3190343277.mp4
view(视图DOM) viewModel(连接中间件 通讯 观察者) model(数据javascript对象)
MVVM框架
针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过Ajax数据持久化,保证前端用户体验
MVVM vue angular react
12-3 Vuejs介绍-什么是Vuejs及Vuejs生态--更多资源q3190343277.mp4
什么是vue.js
它是一个经量级MVVM框架
数据驱动+组件化的前端开发
Github超过25k +的star数,社区完善
12-4 Vuejs介绍-对比Angular、React--更多资源q3190343277.mp4
对比Angular React
Vue.js更轻量,gzip后大小只有20K+
Vue.js更易上手,学习曲线平稳
吸取两家之长,借鉴了angular的指令和react的组件化
12-5 Vuejs介绍-Vuejs核心思想--更多资源q3190343277.mp4
Vue.js核心思想
数据驱动 DOM是数据的一种自然映射
组件化
数据响应原理
数据(model)改变驱动视图(view)自动更新
组件化
扩展HTML元素,封装可重用的代码
组件设计原则
页面上每个独立的可视/可交互区域视为一个组件.
每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第13章 Vue-cli 开启 Vuejs 项目(一期)
13-1 Vue-cli介绍--更多资源q3190343277.mp4
13-2 Vue-cli安装--更多资源q3190343277.mp4
node -v v4.4.5 old
old版本安装 npm install -g vue-cli
vue list 模板 webpack模板
vue init webpack sell
13-3 项目运行--更多资源q3190343277.mp4
自动格式化:Command + option +L
Control + alt + L
13-4 项目文件介绍--更多资源q3190343277.mp4
vue 1.0.21
13-5 webpack打包(上)--更多资源q3190343277.mp4
13-6 webpack打包(中)--更多资源q3190343277.mp4
13-7 webpack打包(下)--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第14章 项目实战-准备工作(一期)
14-1 需求分析--更多资源q3190343277.mp4
14-2 项目资源准备--更多资源q3190343277.mp4
www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ 设备像素比devicePixelRatio简单介绍
14-3 图标字体制作--更多资源q3190343277.mp4
14-4 项目目录设计--更多资源q3190343277.mp4
14-5 mock数据(模拟后台数据)--更多资源q3190343277.mp4
Google的jsonview插件 浏览器json 格式化
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第15章 项目实战-页面骨架开发(一期)
15-1 组件拆分(上)--更多资源q3190343277.mp4
Reset重置css http://cssreset.com 标签默认样式弃掉
/* eslint-disable no-new*/ 跳过eslint检查 注释方法方法上面
15-2 组件拆分(中)--更多资源q3190343277.mp4
webstor 设置 编辑器 文件和代码模板
vue-cli-service lint
eslint --fix --ext .js,.vue src
15-3 组件拆分(下)--更多资源q3190343277.mp4
flex布局
vue-loader/postcss插件 搞定css兼容问题
15-4 Vue-router(上)--更多资源q3190343277.mp4
http://router.vuejs.org/zh-cn/installation.htmll
https://router.vuejs.org/zh/installation.html
npm install vue-router
vue add router
15-5 Vue-router(下)--更多资源q3190343277.mp4
& > a 父元素下的a
css书写规范 display前面 width/height font-size/color=>
15-6 1像素border实现--更多资源q3190343277.mp4
192.168.1.15手机测试 http://cli.im二维码
手机无一像素 想要成
after添加 media transform saleY() 放大
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第16章 项目实战-header组件开发(一期)
16-1 Vue-resource应用(上)--更多资源q3190343277.mp4
https://github.com/vuejs/vue-resource ajax封装
npm install vue-resource -S
16-2 Vue-resource应用(下)--更多资源q3190343277.mp4
16-3 外部组件(1)--更多资源q3190343277.mp4
16-4 外部组件(2)--更多资源q3190343277.mp4
行元素 设置 宽高是没用的 设置为display:inline-block =>span
fluid f路的 流式布局
media 米的二
vertical-align top vertical-align 属性设置元素的垂直对齐方式。
16-5 外部组件(3)--更多资源q3190343277.mp4
16-6 外部组件(4)--更多资源q3190343277.mp4
16-7 外部组件(5)--更多资源q3190343277.mp4
超出三个点显示
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
16-8 外部组件(6)--更多资源q3190343277.mp4
16-9 详情弹层页(1)- 实现弹出层--更多资源q3190343277.mp4
css sticky footers
16-10 详情弹层页(2)- CSS Sticky footer--更多资源q3190343277.mp4
www.w3cplus.com/css3/css-secrets/sticky-footers.html
16-11 详情弹层页(3)- star组件抽象(上)--更多资源q3190343277.mp4
16-12 详情弹层页(3)- star组件抽象(下)--更多资源q3190343277.mp4
16-13 详情弹层页(4)- star组件使用--更多资源q3190343277.mp4
16-14 详情弹层页(5)- 小标题自适应经典flex布局实现--更多资源q3190343277.mp4
www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
Postcss工具
Postcss是根据can i use
(http://caniuse.com/)
官网去写代码
16-15 详情弹层页(6)- header剩余组件实现(上)--更多资源q3190343277.mp4
16-16 详情弹层页(6)- header剩余组件实现(下)--更多资源q3190343277.mp4
transition="fade"
backdrop-filter blur(10px) 模糊
http://vuejs.org.cn/guide/transitions.html#CSS-过渡
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第17章 项目实战-goods 商品列表页开发(一期)
17-1 布局编写--更多资源q3190343277.mp4
flex:0 0 80px(80px占位多少)
17-2 左侧menu布局--更多资源q3190343277.mp4
display:table
17-3 右侧食品列表布局(1)--更多资源q3190343277.mp4
17-4 右侧食品列表布局(2)--更多资源q3190343277.mp4
17-5 右侧食品列表布局(3)--更多资源q3190343277.mp4
17-6 better-scroll运用(1)--更多资源q3190343277.mp4
https://github.com/ustbhuangyi/better-scroll 作者写的库 重写
^0.1.7
npm i better-scroll -S
reboot
created dom还没init 异步 要this.$nextTick() 重新渲染
ref 获得dom
17-7 better-scroll运用(2)--更多资源q3190343277.mp4
17-8 better-scroll运用(3)--更多资源q3190343277.mp4
以前遍历有默认$index vue1
17-9 shopcart购物车组件(1)--更多资源q3190343277.mp4
17-10 shopcart购物车组件(2)--更多资源q3190343277.mp4
box-sizing
17-11 shopcart购物车组件(3)--更多资源q3190343277.mp4
17-12 shopcart购物车组件(4)--更多资源q3190343277.mp4
:min-x props=minX
props:{
x:{
type:Array,//array object 下面default是函数
default(){return[]}
}
}
17-13 shopcart购物车组件(5)--更多资源q3190343277.mp4
.class.highlight &.highlight = div.class
17-14 shopcart购物车组件(6)--更多资源q3190343277.mp4
17-15 cartcontrol组件(1)--更多资源q3190343277.mp4
font-size 默认继承父元素 line-height一块出现多
17-16 cartcontrol组件(2)--更多资源q3190343277.mp4
17-17 cartcontrol组件(3)--更多资源q3190343277.mp4
17-18 购物车小球动画实现(1)--更多资源q3190343277.mp4
17-19 购物车小球动画实现(2)--更多资源q3190343277.mp4
17-20 购物车小球动画实现(3)--更多资源q3190343277.mp4
https://cubic-bezier.com/#.17,.67,.83,.67 贝塞尔曲线
transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
视图 活动编辑 自动换行 webstore
P16 Vue2.0-14.loader-了解loader调用的过程
17-21 购物车详情页实现(1)--更多资源q3190343277.mp4
17-22 购物车详情页实现(2)--更多资源q3190343277.mp4
https://blog.csdn.net/weixin_38049458/article/details/79804546
listShow:{
get(){
return this.fold
},
set(){
if(!this.totalCount){
this.fold=true
return false
}
let show=!this.fold
return show
}
}
get set 默认get 设置不行
17-23 购物车详情页实现(3)--更多资源q3190343277.mp4
this.$nextTick()数据变化重新渲染
17-24 购物车详情页实现(4)--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第18章 项目实战-food 商品详情页实现(一期)
18-1 商品详情页实现(1)--更多资源q3190343277.mp4
18-2 商品详情页实现(2)--更多资源q3190343277.mp4
_下划线内部调用
18-3 商品详情页实现(3)--更多资源q3190343277.mp4
height:0 padding-top:100%
18-4 商品详情页实现(4)--更多资源q3190343277.mp4
//晚点执行 防止卡 一块动画
//体验优化,异步执行下落动画
18-5 商品详情页实现(5)--更多资源q3190343277.mp4
18-6 split组件实现--更多资源q3190343277.mp4
18-7 ratingselect组件(1)--更多资源q3190343277.mp4
按钮 字体变色 /背景图片
18-8 ratingselect组件(2)--更多资源q3190343277.mp4
18-9 ratingselect组件(3)--更多资源q3190343277.mp4
常量 名字 <=数字 容易看懂
18-10 ratingselect组件(4)--更多资源q3190343277.mp4
ps 起色
18-11 ratingselect组件(5)--更多资源q3190343277.mp4
18-12 评价列表(1)--更多资源q3190343277.mp4
18-13 评价列表(2)--更多资源q3190343277.mp4
css规范 影响布局写在上面
18-14 评价列表(3)--更多资源q3190343277.mp4
this.$nextTick()异步更新
18-15 评价列表(4)--更多资源q3190343277.mp4
通用方法 模块化 通用思想
18-16 评价列表(5)--更多资源q3190343277.mp4
18-17 评价列表(6)--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第19章 项目实战-ratings评价列表页实现(一期)
19-1 ratings组件开发-overview开发(1)--更多资源q3190343277.mp4
19-2 ratings组件开发-overview开发(2)--更多资源q3190343277.mp4
19-3 ratings组件开发-overview开发(3)--更多资源q3190343277.mp4
19-4 ratings组件开发-评价列表(1)--更多资源q3190343277.mp4
19-5 ratings组件开发-评价列表(2)--更多资源q3190343277.mp4
19-6 ratings组件开发-评价列表(3)--更多资源q3190343277.mp4
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第20章 项目实战-seller 商家详情页实现(一期)
20-1 seller组件开发-overview开发(1)--更多资源q3190343277.mp4
20-2 seller组件开发-overview开发(2)--更多资源q3190343277.mp4
20-3 seller组件开发-公告与活动开发(1)--更多资源q3190343277.mp4
20-4 seller组件开发-公告与活动开发(2)--更多资源q3190343277.mp4
20-5 seller组件开发-BScroll应用--更多资源q3190343277.mp4
20-6 seller组件开发-商家实景图--更多资源q3190343277.mp4
oveflow:hidden whila-space:nowrap img
20-7 seller组件开发-商家信息--更多资源q3190343277.mp4
20-8 seller组件开发-收藏商家(1)--更多资源q3190343277.mp4
20-9 seller组件开发-收藏商家(2)--更多资源q3190343277.mp4
window.location.search 获得?id=123&a=b
props只读 设置要Vue.set(this,xx,'a','33)
20-10 seller组件开发-收藏商家--更多资源q3190343277.mp4
x 双下划线表示私有的变量
命名空间 window下面的localStorage
{'22':{key:value}} xx[22][key]
20-11 seller组件开发-体验优化--更多资源q3190343277.mp4
keep-alive
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第22章 课程总结(一期)
21-1 webpack配置介绍--更多资源q3190343277.mp4
21-2 nodejs调试--更多资源q3190343277.mp4
node prod.server.js
22-1 课程总结--更多资源q3190343277.mp4
<Vue.js权威指南>
参考资料
Vue.js官网(https://vuejs.org.cn/)
Vue-cli(https://github.com/vuejs/vue-cli)
Vue-resource(https://github.com/vuejs/vue-resource
参考资料
Vue-router(https://github.com/vuejs/vue-router)
better-scroll(https://github.com/ustbhuangyi/better-scroll)滚动相关
webpack官网(http://webpack.github.io/)
Stylus中文文档(http://www.zhangxinxu.com/jq/stylus/)
es6入门学习(http://es6.ruanyifeng.com/)
eslint规则(http://eslint.org/docs/rules/)
设备像素比(http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)
Flex布局(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source-tuicool)
贝塞尔曲线测试(http://cubic-bezier.com/
F:\Vue教程\Vue.js 2.5 + cube-ui 重构饿了么 App\第23章 项目从 vue.js1.0 向 2.0 升级(一期)
23-1 1.0升级2.0 配置文件修改--更多资源q3190343277.mp4
1.0升级到2.0
配置文件修改
Package.json文件修改
Build目录修改
Config目录修改
23-2 1.0升级2.0 源码修改(上)--更多资源q3190343277.mp4
Vue-router API变化
初始化路由变化
v-link指令替换为
Vue 2.0语法变化
v-for指令的变化
v-el,v-ref指令的变化
模板变化,组件只允许一个根元素
Vue 2.0语法变化
组件通信变化$dispatch废除
事件监听变化,废除events属性
不能在子组件直接修改父组件传入的prop
23-3 1.0升级2.0 源码修改(下)--更多资源q3190343277.mp4
Vue 2.0语法变化
过渡的变化,transition组件
小球下落动画实现的变化
keep-alive属性变为
https://vuefe.cn/v2/guide/transitions.html
标签:q3190343277,cube,--,App,js,mp4,Vue,组件,资源 From: https://www.cnblogs.com/KooTeam/p/18606638