From 1ea1faeafbed807402a3388366aae6acef91893f Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Thu, 8 Mar 2018 23:34:58 +0800
Subject: [PATCH] =?UTF-8?q?add=20file:=E4=B8=8A=E7=BA=BF=E6=8C=87=E5=AF=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 06-前端基础/简历技巧.md             |  17 +++++
 12-Vue框架/02-项目设计与原理分析.md |  15 ++++-
 12-Vue框架/03-京东金融的首页.md     |  69 +++++++++++++++++++
 12-Vue框架/03-首页部分.md           |   0
 12-Vue框架/09-上线指导.md           | 101 ++++++++++++++++++++++++++++
 5 files changed, 200 insertions(+), 2 deletions(-)
 create mode 100644 12-Vue框架/03-京东金融的首页.md
 delete mode 100644 12-Vue框架/03-首页部分.md
 create mode 100644 12-Vue框架/09-上线指导.md

diff --git a/06-前端基础/简历技巧.md b/06-前端基础/简历技巧.md
index 6f52b72..c437349 100644
--- a/06-前端基础/简历技巧.md
+++ b/06-前端基础/简历技巧.md
@@ -23,6 +23,23 @@
 
 
 
+## 模块化思维
+
+
+
+
+（1）模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】
+
+比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。
+
+（2）页面有哪几个模块
+
+（3）每个模块分成不同的文件，然后在index页面中import。
+
+
+
+
+
 
 
 
diff --git a/12-Vue框架/02-项目设计与原理分析.md b/12-Vue框架/02-项目设计与原理分析.md
index 298e61d..6d8cf00 100644
--- a/12-Vue框架/02-项目设计与原理分析.md
+++ b/12-Vue框架/02-项目设计与原理分析.md
@@ -17,6 +17,11 @@
 
 - 上线指导
 
+### 面试相关
+
+模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】
+
+比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。
 
 
 本文先讲CSS模块化设计。
@@ -40,7 +45,7 @@
 上图中，整体指的是“布局”。
 
 
-- **先抽象再具体**。
+- **先抽象再具体**。【重要】
 
 
 
@@ -48,6 +53,12 @@
 
 上图中，先看整体的布局，有哪些版块；具体的版块中，有横向列表、纵向列表；最后再是功能。
 
+比如，**panel、按钮、轮播图**等等，都可以提取为**抽象**的组件，复用。
+
+
+
+
+
 
 **总结：**
 
@@ -203,7 +214,7 @@ PS：如果设置了不允许用户缩放，那么最小缩放和最大缩放就
 
 （1）利用`viewport`和设备像素比，调整基准像素。
 
-（2）利用`px2rem`自动转换css单位。
+（2）利用`px2rem`自动转换css单位。我们需要将移动端的字体，从 px转换为 rem。
 
 
 ## SAP设计
diff --git a/12-Vue框架/03-京东金融的首页.md b/12-Vue框架/03-京东金融的首页.md
new file mode 100644
index 0000000..63efc2e
--- /dev/null
+++ b/12-Vue框架/03-京东金融的首页.md
@@ -0,0 +1,69 @@
+
+
+## 需求分析
+
+京东金融首页的需求分析如下：
+
+- 头部
+
+- 轮播图
+
+- 新手特权
+
+- 极速借贷
+
+- 理财精选
+
+- 新品推荐
+
+- 生活服务
+
+- 在线客服
+
+- 公司介绍
+
+- 导航条
+
+20180308_1953.png
+
+
+目前，大多数设计稿的尺寸是iPhone5：320*568。
+
+拿到设计稿后，要先做架构：
+
+
+### 组件化设计
+
+
+### 按钮
+
+俺就可以设计成抽象的组件。
+
+我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。
+
+### panel
+
+
+### 轮播图
+
+Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接：<https://www.npmjs.com/package/vue-awesome-swiper>
+
+
+定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。
+
+
+### css module
+
+这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。
+
+
+### 第三方的自适应解决方案
+
+hotcss：<https://github.com/imochen/hotcss>
+
+
+
+
+
+
+
diff --git a/12-Vue框架/03-首页部分.md b/12-Vue框架/03-首页部分.md
deleted file mode 100644
index e69de29..0000000
diff --git a/12-Vue框架/09-上线指导.md b/12-Vue框架/09-上线指导.md
new file mode 100644
index 0000000..e5e1136
--- /dev/null
+++ b/12-Vue框架/09-上线指导.md
@@ -0,0 +1,101 @@
+
+
+## 前言
+
+上线指导包括：
+
+- **生产构建**：合并、抽取、压缩、调试。
+
+
+- **发布部署**：提交、部署、开启gzip压缩、更新CDN。
+
+下面来讲一下。
+
+## 生产构建
+
+生产构建包括：
+
+- 合并：style、js
+
+- 抽取：样式要从javaSCript中抽取出来
+
+- 压缩：JS、CSS都要压缩。
+
+- 调试：开启SourceMap。
+
+下面分别讲一下。
+
+### 合并、抽取
+
+我们发现，首页引入了很多`<style>`节点，它们代表了不同的模块。我们需要把它们合并在一起，然后抽取成一个单独的css文件。
+
+原因很简单：
+
+- 浏览器会先渲染head部分，因此，css在渲染的时候，通常是放在head部分。
+
+- js部分是放在body部分，如果css和js混在一起了，会导致，js的体积比较大。
+
+
+编译出生产环境下的dist：
+
+```
+	npm run build
+```
+
+
+### 压缩
+
+给生产环境的代码做压缩工作。
+
+js压缩用webpack官网提到的[`Minification`](https://doc.webpack-china.org/guides/production/#minification)，推荐的插件是`UglifyJSPlugin`。指导链接：<https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin>
+
+css压缩用css loader。
+
+
+### 调试
+
+如果要让线上的代码支持**线上调试**，就要开启**sourceMap**。指导链接：<https://doc.webpack-china.org/guides/production/#source-map>
+
+
+## 发布部署
+
+发布部署包括：
+
+- 提交
+
+- 部署
+
+- 开启gzip压缩
+
+- 更新CDN
+
+### 提交
+
+使用Git提交代码，管理线上版本。
+
+### 部署
+
+php、java等服务器端从Git仓库拉去代码，依次部署到小流量、单机房、跨机房、全量部署。
+
+流程是这样的：前端人员提交代码到Git仓库，后端或者运维人员负责部署代码。后端人员先把代码部署到小流量（一台机器上），供前端人员测试；如果没有问题，就开始部署单机房等等。
+
+### gzip压缩
+
+gzip一般是服务器端在Ngix就配置好了，但是前端人员一定要检查确认一下 css 文件和 js文件有没有开启gzip压缩，避免服务器端人员把这个漏掉了。
+
+### 更新CDN
+
+
+CDN的更新有很多种方式。 方式一：一般情况下，CDN厂商会给业务方提供CDN更新的接口。方式二：有的情况下，会采用自动更新。不管是哪种方式，一定要检查线上的CDN的源代码是否更新了。
+
+比如说，代码中修复了某个bug或者增加了新功能，如果某个地方的CDN没有更新，就会导致**那一片区域**的用户无法访问到你的新代码 or 新功能。
+
+
+
+
+
+
+
+
+
+