1）业务开发流程回顾
2）技术选型分析
3）工程构建安装
4）项目设计以及原理分析
5）首页开发
6）理财开发
7）白条开发
8）众筹开发
9）专题页开发
10）构建工具详解
11）面试进阶
第1章 课程介绍
包括课程概述、课程安排、学习前提等方面的介绍，让同学们对组件化有一个直观的了解。
第2章 环境及知识准备
帮助大家梳理课程要用到的开发环境及知识储备
第3章 业务开发流程与工程构建安装
该章节会快速的讲解各大公司的业务开发流程，包括技术选型、业务开发、测试验证、发布上线等内容，方便大家定位前端开发的角色及注意事项。并帮助大家快速的搭建开发环境，把主要精力放到项目的设计学习上，所有的构建放在最后的章节...
第4章 项目设计与原理分析
该章节根据需求分析详细讲述项目设计方案，CSS模块化设计、JS组件设计、自适应 、SPA设计、构建设计、上线指导等内容，并逐一讲述项目设计方案背后的工作原理理，做到知其然知其所以然。
第5章 京东金融首页
该章节开始实战环节，完成第一个项目的页面，其中还包括公共组件的开发。
第6章 京东金融理财页
该章节是实战的第二个页面，和首页相比组件难度较小，主要包括页面搭建、广告组件（神券满）、轮播图组件、精选推荐组件、广告组件（京东智投）。希望大家可以先主动去练练手，试试能不能1个小时完成该页面的开发。
第7章 京东金融白条页
该章节是实战的第三个页面，难度中等，主要包括轮播图组件、白条福利利组件 更多服务组件。通过这个页面的学习可以将前面的组件化设计方法运用到该页面，举一反三。
第8章 京东金融众筹页
该章节是实战的第四个页面，难度较大，主要包括轮播图组件（纵向）、每日签到组件 、In货推荐组件、更多福利组件，更能彰显组件化抽象设计的威力，希望大家多多思考让自己对组件化方法彻底吸收。
第9章 活动专题页
主要讲述移动Web最常见的专题活动开发方法、难点解决及注意事项。
第10章 上线指导
讲述项目设计如何做到上线，方便大家根据自己业务的架构方案零成本上线迁移。
第11章 工程构建详解
该章节从0讲述如何使用Webpack(v3.10.0)构建自己的项目，摆脱对其他脚手架的依赖，方法和代码同在，艺多不压身，你可以的。
第12章 面试知识点与技巧
做好项目一方面是完成业务开发，提升自己的实力；一方面是让自己在下一次面试积累资本，让职业生涯稳步向前。该章节帮你在“项目面试”中拔得头筹。
第13章 课程总结
对课程整体进行一个总结
css模块化以及模块化设计
组件化设计的灵活
vue相关用法
自动化构建
node版本管理工具：
nvm----多个node版本的管理
nvm -ls
git命令：
git init
clone
add *
push
commit
checkout -b xxx
checkout xxx
webpack
npm scripts ----------任务管理
babel----------Es6必备工具之一
编辑器：
Atom
Eslint---------代码质量规范检查工具
Es6
Sass
Vuejs
业务开发流程：
技术选型
业务开发
测试验证
发布上线
1）技术选型：
构建工具
MVVM框架选择
模块化设计
自适应方案设计
代码维护以及复用性设计的思考
构建工具：
有哪些构建工具：gulp grunt -----------任务分配和管理 （gulp是流式的）
webpack----------------打包管理
fis--------------------百度内部集成的方案
prepack----------------facebook推出的，没有dom和bom
rollup-----------------类似webpack功能，其中trill-shirnk编译打包之前可以去掉重复代码
为什么用构建工具：资源压缩 静态资源替换 模块化处理 编译处理
我们用哪个构建工具：webpack
npm scripts -----------也可以做任务管理
MVVM框架选择：
Vuejs
Reactjs
Angularjs
1)团队成员技术背景
2)生态-----作者对框架维护的热度，文档的详细程度
3)原理-----框架的原理，性能的影响
模块化设计：
css模块化
js模块化
自适应方案设计：
设计稿是一份，设备不是一份的
写一份代码，自动化适配----构建工具中写
代码维护以及复用性设计的思考：
需求变更
产品迭代
Bug定位
新功能开发
2）工程构建：
下载代码
安装调试：
cd JDFinance
npm install
git checkout setup
npm start
测试验证:
是不是安装正确
ESlint是不是能够检查代码格式
是不是能够编译Vue ES6
是不是能够编译scss和css
修改代码后浏览器能不能自动刷新
css模块化是不是正确----------------<div :class="$style.home"> <style lang="scss" module>
3）项目设计与原理分析：
css模块化设计
js组件设计
自适应方案设计
SPA设计
构建设计
上线指导
css模块化设计:
设计原则：
可复用能继承要完整
周期性迭代--------------模仿 设计 重构
设计方法：
先整体后部分再颗粒化
布局-------grid flex ，决定了怎么写css
页面-------模块
功能-------功能组件，比如按钮
业务-------继承功能UI，有具体的逻辑，跟业务有耦合了
先抽象再具体
reset.scss
layout.scss
element.scss
global
scope-----------<style lang="scss" module>
js组件设计原则：
高内聚低耦合-----------抽象一个列表js组件
周期性迭代-------------
设计方法：
先整体后部分再颗粒化
尽可能的抽象
自适应：
1、基本概念
css像素 设备像素 逻辑像素 设备像素比
viewport
rem
2、工作原理
利用viewport和设备像素比调整基准像素
利用px2rem自动转换css单位
css像素---逻辑像素：height width:20px
设备像素：硬件相关的，物理像素
设备像素比：css像素1px对应几个物理像素
viewport:
width = device-width--------------layout viewport等于ideal viewport,可以看到整个页面的内容。手机自动铺满
height
initial-scale
maximum-scale
minimum-scale
layout viewport----------页面本来的大小窗口
visual viewport----------被裁减出来的窗口大小
ideal viewport-----------手机的宽和高组成的尺寸
rem:------------html根元素的font-size大小
html font-size
利用viewport和设备像素比调整基准像素
SPA设计：
设计意义：
前后端分离
减轻服务器压力
增强用户体验
Prerender预渲染优化SEO
工作原理：
History API------看起来优雅，但是对浏览器有要求
Hash----------兼容性最好
History API：
打开---------入口 打开页面
历史记录操作单-----------前进 后退 控制
pushstate----------创建历史记录
onpopstate---------来响应浏览器的前进后退以及控制事件
Hash:
hashchange---------监听hashchange事件，知道页面的地址发生变化了，然后在事件里面做相应的动作
location.hash------改变某一个地址的时候，修改这个hash
应用history方式创建路由：
<a class="api a">a.html</a>
<a class="api b">b.html</a>
//注册路由
document.querySelectorALl('.api').forEach(item => {
item.addEventListener('click', (e) => {
e.prevenbtDefault();-------阻止a标签默认的事件
let link = item.textContent;
window.history.pushState({name:'api'}, link, link);------pushState接受三个参数
}, false)
})；
//监听路由
window.addEventListener('popstate', (e)=>{
console.log({
location:location.href,
state:e.state
});
}, false)
应用hash方式创建路由：
<a class="hash a">#a.html</a>
<a class="hash b">#b.html</a>
//注册路由
document.querySelectorALl('.hash').forEach(item => {
item.addEventListener('click', (e) => {
e.prevenbtDefault();-------阻止a标签默认的事件
let link = item.textContent;
location.hash = link;
}, false)
})；
//监听路由
window.addEventListener('hashchange', (e)=>{
console.log({
location:location.href,
hash:location.hash
});
}, false)
构建工具：
webpack---------配置 安装 plugin
babel ----------配置 安装 loader （编译工作）
dev-server------配置 安装 （热更新 文件额渲染服务）
上线指导：
html
css
javascript
实战开发环节：
需求分析：
组件设计：
panel:-----header body
btn
slider
css模块可以通过抽象组件引入进来的
Emmet插件-------快速生成div class id
vue-awesome-swiper
props: {
cname: {
type: String,
default: "",
},
options: {
type: Object,
default() {------------------定义对象的时候，default(){return{}} -----相当于default: function(){return{}}
return {
autoplay: true,
loop: true,
pagination: {
el: ".swiper-pagination",
},
notNextTick: false,
}
},
},
<img :src="item.src" alt="">
首页--header组件：
背景图片----图片尺寸容易控制 可以控制任何位置 可以通过构建工具打包成base64到css中
-----------空格
css module-----------:class="$style.cname"
.slider{
margin-top: 120px;
img{------------------只对当前引用组件的img有css作用
width: 100%;
}
}
在业务层的组件，完全不用关心css js，只传送一下数据过去
新手特权：
css核心的是布局
先抽象出来布局
不抽象成组件的原因：
不是数据驱动的
结构简单
出现的次数少
&:first-child{----------css3高级元素选择器
}
避免文字换行溢出：
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
极速借贷：
所有线的问题-----border 伪元素
&:after{
content: " ";
width: 1px;
height: 136px;
display: block;
position: absolute;--------------纵向线条，没有贯穿，absolute top margin-top实现垂直方向居中显示
top: 50%;
right: 0;
margin-top: -68px;
border-right: 1px solid #eee;
}
&:nth-child(2n){
&:after{
display: none;
}
}
dl dt dd标签活用-----------如果ul li，那么第一个dt需要用nth-child 或者class区分
dt
nth-child
.class
&:after{
content: " ";
display: block;
width: 100%;
height: 0px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
position: relative;------------------content:after底部贯穿线条，提升relative位置，在四个小块中间横向显示
top: -208px;
}
新品推荐：
footer:
.panel{
@include panel;
margin-bottom: 100px;---------底部留距离，tabbar，否则有部分内容会被tabbar挡住
&:nth-child(n+3){---------------从第三个元素开始选择
padding: 24px 0;
height: 38px;
line-height: 38px;
border-top: 1px solid #ddd;
}
navBar:
.content{
@include flex(row);
justify-content: space-around;-----------实现导航栏水平方向均匀分布
组件化思想-------抽象到具体
css模块化
sass整合全站的css样式
第6章
第9章：
活动页：
.content{--------------外层容器flex布局，实现容器内部元素水平垂直居中
@include flex;
justify-content: center;
align-items: center;
height: 1136px;
width: 100%;
>div{
background: url(https://img12.360buyimg.com/jrpmobile/jfs/t8956/285/1249806938/50853/8cd3c8f0/59b65f36N05367075.png?) center center no-repeat;
width: 600px;
height: 800px;
background-size: 100% auto;
margin-top: -400px;-----------在水平垂直居中的前提下，可以灵活的设置位置
}
上线指导：
生产构建：
合并 -------style
javascript
抽取 ------样式要从javacript中抽取出来
压缩 ------js css都要压缩
调试--------开启sourceMap
发布部署：
提交 -------git提交到远端仓库
部署 ------php java从git仓库拉取代码，通过小流量、跨机房、全量部署
开启gzip压缩 ---开启gzip压缩
更新CDN -----不要忘了更新cdn------检查线上cdn源代码是否有更新过来了
package.json--------scripts脚本：
https://webpack.docschina.org/guides
webpack压缩 js压缩：uglifyplugin插件
css压缩：css-loader?minimize----------css-loader的选项minimize:true压缩css
sourceMap----------devtool: 'source-map',
new UglifyJSPlugin({
+ sourceMap: true-------------需要加入这一行的
+ })
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',----------webpack升级之后-loader需要写全
使用预处理器：
px2rem功能实现
{
test: /\.vue$/,
loader: 'vue-loader',
options: {--------------------增加options选项来配置预处理器的
loaders: {
scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
}
}
}
{------------京东金融项目中有用到两种css 和scss样式语言
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
}
const CleanWebpackPlugin = require('clean-webpack-plugin');-----------给devServer生成的目录定时的清除
css Modules:----------CSS Modules 处理是通过 css-loader。你可以使用 vue-loader 的 cssModules 选项去为 css-loader 添加 query 配置：
{
test: '\.vue$',
loader: 'vue-loader',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
}
提取css到单个文件：
构建 vue-loader
const ExtractTextPlugin = require("extract-text-webpack-plugin");
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader' // <- 这是vue-loader的依赖，所以如果使用npm3，则不需要显式安装
-------------------options.use----Loader(s) that should be used for converting the resource to a CSS exporting module (required)
-------------------options.fallback-----loader(e.g 'style-loader') that should be used when the CSS is not extracted (i.e. in an additional chunk when allChunks: false)
})
}
}
}
plugins: [
new ExtractTextPlugin("style.css")
]
{
css: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8',
scss: 'vue-style-loader!css-loader!px2rem-loader?remUnit=40&remPrecision=8!sass-loader'
}----------------------------vue-style-loader的用法发生了变化
生产环境下整合成下面这种写法：
{
css: ExtractTextPlugin.extract({
use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8',
fallback: 'vue-style-loader'
}),
scss: ExtractTextPlugin.extract({
use: 'css-loader?minimize!px2rem-loader?remUnit=40&remPrecision=8!sass-loader',
fallback: 'vue-style-loader'
})
}
new ExtractTextPlugin("style.css", {ignoreOrder: true}),
DefinePlugin：
The DefinePlugin allows you to create global constants which can be configured at compile time.
This can be useful for allowing different behavior between development builds and release builds.
const webpack = require('webpack');
module.exports = env => {------------根据传进来的参数，运行环境的不同，来构建不同环境下的选项
if (!env) {
env = {}
}
let plugins=[
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({template: './app/views/index.html'}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
];
if(env.production){
plugins.push(
new webpack.DefinePlugin({------------给webpack本身修改全局变量
'process.env': {
NODE_ENV: '"production"'
}
}),
new ExtractTextPlugin("style.css", {ignoreOrder: true}),
new UglifyJsPlugin({sourceMap: true})
)
}
return {--------------通过函数，返回对象
entry:'',
module:{},
plugins:'',
output:{}
}
}