京东金融Vue组件化实战
京东金融Vue组件化实战
D:\Vue教程\京东金融Vue组件化实战\第01章 课程介绍
第01章 课程介绍
1-1课程导学.mp4
前端成长必经之路-组件化思维与技巧
@快乐动起来呀
组件化的思维方式及项目设计
组件化和模块化不仅仅是JS也包括CSS
如何将项目做出亮点，面试又该如何表现
学会独立构建一个项目，做到独当一面
复习Vue.js，Scss，Webpack，node，npm，ES6，Git相关知识
配置好开发环境，掌握项目各项设计的原理
先学习首页的组件化设计，思考和动手实施理财开发等
学会项目构建和配置
总结项目技能、沉淀经验、梳理面试技能
D:\Vue教程\京东金融Vue组件化实战\第02章 环境及知识准备
第02章 环境及知识准备
2-1环境及知识准备.mp4
git www.bootcss.com/p/git-guide/
webpack npm scripts babel
ES6 http://es6-features.org/#Constants
D:\Vue教程\京东金融Vue组件化实战\第03章 业务开发流程与工程构建安装
第03章 业务开发流程与工程构建安装
3-1 技术选型分析.mp4
业务开发流程
技术选型
业务开发
测试验证
发布上线
技术选型分析
构建工具
MVVM框架选择
模块化设计
自适应方案设计
代码维护及复用性设计的思考
技术选型分析
构建工具
1、构建工具有哪些
gulp grunt webpack fis prepack rollup
2、为什么要构建工具
资源压缩 静态资源替换 模块化处理 编译处理
3、我们用哪个构建工具
webpack npm scripts
技术选型分析
代码维护及复用性设计的思考
需求变更
Bug定位
产品选代
新功能开发
3-2 工程构建安装.mp4
git clone git@github.com:cucygh/JDFinance.git
cd JDFinance
npm install
git checkout setup
npm start
<div :class="$style.home">
<style module>
.home{}
</style>
D:\Vue教程\京东金融Vue组件化实战\第04章 项目设计与原理分析
第04章 项目设计与原理分析
4-1 css模块化设计.mp4
项目设计与原理分析
CSS模块化设计
JS组件设计
自适应
SPA设计
构建设计
上线指导
CSS模块化设计
1、设计原则
a、可复用能继承要完整
b、周期性选代
2、设计方法
a、先整体后部分再颗粒化
b、先抽象再具体
4-2 css模块化设计（代码）.mp4
4-3 js组件化及自适应mp4.mp4
JS组件设计设计原则
a、高内聚低耦合
b、周期性迭代
JS组件设计设计方法
a、先整体后部分再颗粒化
b、尽可能的抽象
1、基本概念
a、CSS像素、设备像素、逻辑像素、设备像素比
b、viewport
c .rem
2、工作原理
a、利用viewport和设备像素比调整基准像素
b、利用px2rem自动转换css单位
https://github.com/jawil/blog/issues/21 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
自适应基本概念
b，viewport
<meta name="viewport"content="width=device-width，initial-scale=1.0">
width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）
height：和width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放
3个viewport 原理
利用viewport和设备像素比调整基准像素
4-4 spa设计.mp4
http://codingfishman.github.io/2016/05/06/prerender预渲染优化SEO/
SPA设计
1、设计意义
a、前后端分离
b、减轻服务器压力
c、增强用户体验
d.Prerender预渲染优化SEO
2、工作原理
a.History API
b.Hash
window.history.pushState popstate
location.hash hashchange
4-5 构建工具及上线指导.mp4
D:\Vue教程\京东金融Vue组件化实战\第05章 京东金融首页
第05章 京东金融首页
5-1 首页-抽象组件设计.mp4
5-2首页-抽象组件设计.mp4
vue-awesome-swiper 轮播图组件
5-3 首页-header组件.mp4
img background 背景优先 可转base64 少请求等
5-4 首页-slider组件.mp4
https://github.com/imochen/hotcss/tree/master/src hotcss 让移动端布局开发更加容易
5-5 首页-slider组件bug修复及总计_213053.mp4
5-6 首页-新手特权（1）.mp4
5-7 首页-新手特权（2）.mp4
5-8 首页-新手特权（3）.mp4
box-sizing:border-box padding 不再减width
5-9 首页-新手特权（4）.mp4
5-10 首页-极速借贷-理财精选（1）.mp4
不变的固定写死 服务端的动态
5-11 首页-极速借贷-理财精选（2）.mp4
after border
5-12 首页-极速借贷-理财精选（3）.mp4
5-13 首页-新品推荐.mp4
第三方组件 不用css module 否则获取不到
css视觉欺骗
5-14 首页-生活服务.mp4
5-15 首页-公司信息.mp4
图片 img.src //自己选择协议 http https
nth-child(n+3) 从第三个开始
5-16 首页-导航条.mp4
D:\Vue教程\京东金融Vue组件化实战\第06章 京东金融理财页
第06章 京东金融理财页
6-1 理财（1）mp4.mp4
广告变更频繁 命令 单独
6-2 理财（2）.mp4
线 border after伪元素
6-3 理财（3）.mp4
有经验的 可能带来的变化 业务变化 需求变化
D:\Vue教程\京东金融Vue组件化实战\第07章 京东金融白条页
第07章 京东金融白条页
7-1 白条（白条福利）.mp4
抽象组件 业务组件
7-2 白条（更多服务）.mp4
模板写死 data数据
D:\Vue教程\京东金融Vue组件化实战\第08章 京东金融众筹页
第08章 京东金融众筹页
8-1 众筹-轮播图.mp4
提示滚动 轮播图做
8-2 众筹-每日签到.mp48-2 众筹-每日签到.mp4
8-3 众筹-in推荐（1）mp4.mp4
8-4 众筹-in推荐（2）.mp4
:style="" width % progress
max-width =100%
8-5 众筹-更多福利.mp4
D:\Vue教程\京东金融Vue组件化实战\第09章 活动专题页
第09章 活动专题页
9-1 活动页（1）.mp4
html,body改背景 组件页面 就不用absolute wx可能不行 page
9-2 活动页（2）.mp4
平面设计pslast cks软件生成css boxshaow 渐变....
D:\Vue教程\京东金融Vue组件化实战\第10章 上线指导
第10章 上线指导
10-1 上线指导.mp4
生产构建
合并、抽取、压缩、调试
发布部署
提交、部署、开启gzip压缩、更新CDN
生产构建
合并 style javascript
抽取 样式要从JavaScript中抽取出来
压缩 JS、CSS都要压缩
调试 开启sourceMap
npm run start == npm start 省掉 其他命令不可以
调式 map 上线 js最后有提示加入成功
发布部署
提交 使用Git提交代码，管理线上版本
部署 php，java等从git仓库拉取代码，通过小流量、跨机房、全量部署 运维 后端做
开启gzip 开启gzip压缩
更新CDN 不要忘了更新cdn
D:\Vue教程\京东金融Vue组件化实战\第11章 工程构建详解
第11章 工程构建详解
11 构建工具-1.mp4
项目准备
1、创建目录
2、初始化
npm init package.json
3、创建业务目录
app->js->main，App.vue
app->cSS->reset.scss
app->views->index.html
名字不能和常用包相同 文件夹 webpack
创建配置文件
1、创建配置文件
webpack.config.js
2、文件配置
entry
module
plugins
output
基础配置
resolve
devtool
devServer
进阶配置
vscode code .
11 构建工具-2.mp4
npm install --save-dev webpack-dev-server
npm i html-loader vue-loader style-loader css-loader sass-loader -D
npm i vue vue-router
11 构建工具-3.mp4
webpack-dev-server --open
npm i webpack -D
npm install -D webpack-cli
npm i html-webpack-plugin clean-webpack-plugin -D
npm i node-sass -d
11 构建工具-4.mp4
https://vue-loader.vuejs.org/zh-cn/configurations/pre-processors.html sass
npmjs.com px2rem-loader
npm install px2rem-loader
clean-webpack-plugin 可以清缓存问题
11 构建工具-5.mp4
提取一个css npm i extract-text-webpack-plugin -D
11 构建工具-6.mp4
[1,2,3].push(4,5)
11 构建工具-7.mp4
11-8 配置eslint-1.mp4
v-else 不能单独使用
1、安装
npm install eslint--save-dev
2、配置文件 支持以下文件 配置一个就行了 只读取一个 有多个按优先级
eslintrc.js 高
eslintrc.yaml
eslintrc.yml
eslintrc.json
eslintrc
package.json 低
https://github.com/vuejs/eslint-plugin-vue
https://github.com/mysticatea/vue-eslint-demo/blob/master/.eslintrc.json
npm i eslint-plugin-vue eslint-plugin-node eslint-config-mysticatea eslint-plugin-vue -D
11-9 配置eslint-2.mp4
面试知识点与技巧
面试回顾
同学做过哪些项目啊.
为什么用这样的框架呢.
在项目中的角色是什么？解决过哪些难题.
通过这个项目学到了什么。
D:\Vue教程\京东金融Vue组件化实战\第12章 面试知识点与技巧
第12章 面试知识点与技巧
12-1 面试回顾.mp4
12-2 面试分析.mp4
面试分析
二面在考什么？项目要怎么准备？项目该怎么介绍？沟通有哪些技巧？
1基础2项目3文化4人事
二面在考什么？
项目经验 技术深度 架构能力
项目要怎么准备？
1.梳理历史项目
2、打造一个较满意的项目
3、问答设计
4、更多思考
没限制是在公司 家里 时间地点 旧项目翻新技术 最近的
面经
项目该怎么介绍？
项目背景 项目收益 项目设计 项目总结
沟通有哪些技巧？
强逻辑 要谦虚 知进退 善总结
12-3 面试演练.mp4
为什么选择Vue框架？
Vue的双向绑定是如何实现的？
有没有使用CSS Module，基本原理是什么，Vue该如何做？
开启CSS Module之后如何使用第三方样式库？
Vue的安装包有几个版本，遇到问题如何解决的？
你的项目有什么特色，解决过什么问题，用了什么技术方案？
为什么选择Webpack构建工具？
项目是如何使用Webpack的？dev-server的原理是什么？
有没有实现一个webpack的loader？
如何做任务管理的？
你的项目有什么特色？
解决过什么问题，怎么解决的？用的什么技术方案？
你对自己的项目是否满意，有改进空间吗？
如果这个项目现在让你重新设计，你会怎么思考？
自适应方案应该怎么做，原理是什么
rem和em的区别
前后端分离是如何做的？
前端的路由是什么原理
D:\Vue教程\京东金融Vue组件化实战\第13章 课程总结
第13章 课程总结
13-1 课程总结.mp4
项目设计
如何抽象设计组件？
如何设计模块化？
如何独立构建项目？
如何上线？
方案原理
最完美的自适应方案如何做？
路由的工作原理？
Vue的相关用法
面试技巧
项目如何准备？
项目的深度思考
项目的面试问答演练
更多彩弹
觉得项目难度不大，不够过瘾？
新的构建技术也想了解？
离线技术也想学习？
用到的技术
周期性迭代
优秀的代码是模仿出来的
优秀的代码是设计出来的
优秀的代码是重构出来的
scss rem SSR SPA
https://github.com/jawil/blog/issues/21 CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
http://codingfishman.github.io/2016/05/06/prerender预渲染优化SEO/ SSR SEO
vue-awesome-swiper 轮播图组件
抽象组件代码 复用
https://stackoverflow.com IT都用这个网站
https://github.com/vuejs/eslint-plugin-vue
https://github.com/imochen/hotcss/tree/master/src hotcss 让移动端布局开发更加容易 和rem一样响应式
面试知识点与技巧
面试回顾
同学做过哪些项目啊.
为什么用这样的框架呢.
在项目中的角色是什么？解决过哪些难题.
通过这个项目学到了什么。
面试分析
二面在考什么？项目要怎么准备？项目该怎么介绍？沟通有哪些技巧？
二面在考什么？
项目经验 技术深度 架构能力
项目要怎么准备？
1.梳理历史项目
2、打造一个较满意的项目
3、问答设计 (逆向思维 假设问什么)
4、更多思考
项目该怎么介绍？
项目背景 项目收益 项目设计 项目总结
沟通有哪些技巧？
强逻辑 要谦虚 知进退 善总结
为什么选择Vue框架？
Vue的双向绑定是如何实现的？
有没有使用CSS Module，基本原理是什么，Vue该如何做？
开启CSS Module之后如何使用第三方样式库？
Vue的安装包有几个版本，遇到问题如何解决的？
你的项目有什么特色，解决过什么问题，用了什么技术方案？
为什么选择Webpack构建工具？
项目是如何使用Webpack的？dev-server的原理是什么？
有没有实现一个webpack的loader？
如何做任务管理的？
你的项目有什么特色？
解决过什么问题，怎么解决的？用的什么技术方案？
你对自己的项目是否满意，有改进空间吗？
如果这个项目现在让你重新设计，你会怎么思考？
自适应方案应该怎么做，原理是什么
rem和em的区别
前后端分离是如何做的？
前端的路由是什么原理
浙公网安备 33010602011771号