/JDFinance

vue学习,仿京东金融首页

Primary LanguageVue

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

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

体验地址

体验地址

请使用手机扫码体验,微信或者浏览器的扫一扫都可以的。

CSS模块化设计

  1. 设计原则
  • 可复用能继承要完整
  • 周期性迭代
  1. 设计方法
  • 先整体后部分再颗粒化
  • 先抽象再具体

图例1 图例2

代码

  1. /app/css/layout.scss
  2. /app/css/element.scss

JS组件设计

  1. 设计原则
  • 高内聚低耦合
  • 周期性迭代
  1. 设计方法
  • 先整体后部分再颗粒化
  • 尽可能的抽象

自适应

  1. 基本概念
  1. 工作原理
  • 利用viewport和设备像素比调整基准像素
  • 利用px2rem自动转换css单位

SPA设计

  1. 设计意义
  • 前后端分离
  • 减轻服务器压力
  • 增强用户体验
  • prerender预渲染优化SEO
  1. 工作原理
  • history API
  • hash 图例3 图例4