# JDFinance

**Repository Path**: bolsters/JDFinance

## Basic Information

- **Project Name**: JDFinance
- **Description**: 模仿京东金融
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-11-01
- **Last Updated**: 2021-09-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 组件化思维与技巧之京东金融实战

本项目使用的是Vue(2.5.9)实现的组件化课程，侧重思维与方法的训练。在模块化方面不仅涉及常规的JS还有CSS，CSS的模块化使用Sass组织代码，将模块化设计做到极致。在构建部分采用webpack（3.10.0） 和 npm scripts独立完成，不依赖任何第三方的脚手架。

### 安装

```shell
git clone 
cd JDFinance
npm install
```

### 切换分支

项目里使用git分支来管理不同章节的代码，根据自己的情况选择不同的分支进行开发。

1. 如何查看所有的分支？

```shell
git branch
```
<table>
  <thead>
    <tr>
      <th>分支名</th>
      <th>章节</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>master</td>
      <td>默认和setup一致</td>
    </tr>
    <tr>
      <td>setup</td>
      <td>最基础的构建部分</td>
    </tr>
    <tr>
      <td>setup-edit</td>
      <td>完整的构建部分，可以在这个基础上进行开发</td>
    </tr>
    <tr>
      <td>router</td>
      <td>增加了vue-router部分，只想看单页面的同学选择这个分支</td>
    </tr>
    <tr>
      <td>chapter-home</td>
      <td>首页</td>
    </tr>
    <tr>
      <td>chapter-money</td>
      <td>理财</td>
    </tr>
    <tr>
      <td>chapter-ious</td>
      <td>白条</td>
    </tr>
    <tr>
      <td>chapter-raise</td>
      <td>众筹</td>
    </tr>
    <tr>
      <td>chapter-download</td>
      <td>活动页</td>
    </tr>
    <tr>
      <td>chapter-online</td>
      <td>上线指导</td>
    </tr>
  </tbody>
</table>

2. 如何切换分支？

```shell
git checkout 分支名
```

### 常见问题

这里会定期整理大家常见的问题，访问如下：

<a href="./issue.md" target="_blank">点击查看常见问题</a>


### 项目设计与原理分析
+ CSS模块化设计
  + 设计原则
    + 可复用能继承要完整
    + 周期性迭代
      + 优秀的代码是模仿/设计/重构出来的
  + 设计方法
    + 先整体后部分再颗粒化
      + 布局-> 页面 -> 功能->业务
    + 先抽象在具体
+ JS组件设计
  + 设计原则
    + 高内聚低耦合
    + 周期性迭代
  + 设计方法
    + 先整体后部分再颗粒化
    + 尽可能的抽象
+ 自适应
  + 基本概念
    + css像素、设备像素、逻辑像素、设备像素比
    + viewport
    + rem
  + 工作原理
    + 利用viewport和设备像素比调整基准像素
    + 利用px2rem自动转换css单位
+ SPA设计(单页面)
  + 设计意义
    + 前后端分离
    + 减轻服务器压力
    + 增强用户体验
    + Prerender预渲染优化SEO
  + 工作原理
    + History API
    + Hash
+ 构建设计
  + 构建工具
    + 配置 Babel webpack webpack-dev-server
+ 上线指导
  + html css javascript

### 需求分析
+ 头部
+ 轮播图
+ 新手特权
+ 极速借贷
+ 理财精选
+ 新品推荐
+ 生活服务
+ 在线客服
+ 公司介绍
+ 导航条

### 首页
> 安装vue-awesome-swiper
>  
> npm install vue-awesome-swiper --save
> 
> cnpm install vue-awesome-swiper --save
>