从0到1如何开始一个前端项目(电商)

本文详细介绍了从需求分析到技术选型,再到具体模块的实现,如用户、商品、购物车和支付等,涵盖前端项目搭建、SEO优化、线上部署等方面。采用模块化方案,如CommonJS+Webpack,框架选择了React和Query,并讨论了前后端分离的各种策略,以及优化方案,包括Server Render和SEO处理。
摘要由CSDN通过智能技术生成

当我们开始一个前端项目时,可以从下面几点考虑。

  • 整体架构

    • 图片描述
  • 业务功能实现

  • 系统整体可用性,可维护性,可扩展性

    • 前后端分离
      • API接口交互
  • 分层架构设计

    • 定义:把功能相似,抽象级别相近的实现进行分层隔离
    • 优势:松散耦合(易维护、易复用、易扩展)
    • 常见分层方式::MVC,MVVM
  • 模块化思想

    • 定义:解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程
    • 意义:解耦,可并行开发
    • 模块化方案:AMD,CMD,CommonJS,ES6
  • 工具

    • WebPack
    • NodeJS
    • NPM
    • Shell
    • Charles
    • Git

需求分析

图片描述

拆分原则
  • 单个迭代不宜太大

  • 需求可交付,能够形成功能闭环

  • 有成本意识,遵循二八原则

  • 有预期的价值体现
    图片描述

  • 商品

    • 首页、商品列表、商品详情
  • 购物车

    • 购物车数量、添加删除商品、购物车提交
  • 订单

    • 订单确认(地址管理)、订单提交、订单列表、订单详情
  • 支付

  • 用户

    • 登录
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值