企业级电商平台-前端搭建(有源码)

目标

  • 整体架构()
  • 业务功能实现
  • 系统整体可用性,可维护性,可扩展性 
    • 前后端分离 
      • API接口交互
    • 分层架构设计 
      • 企业级电商平台-前端搭建(有源码)_第1张图片
    • 模块化思想 
      • 企业级电商平台-前端搭建(有源码)_第2张图片 
        • 架构
        • 企业级电商平台-前端搭建(有源码)_第3张图片
  • 工具 
    • WebPack
    • NodeJS
    • NPM
    • Shell
    • Charles
    • Git

前台

企业级电商平台-前端搭建(有源码)_第4张图片

后台

企业级电商平台-前端搭建(有源码)_第5张图片

需求分析

企业级电商平台-前端搭建(有源码)_第6张图片

技术选型

同一域名,同一请求的资源数是有限的

企业级电商平台-前端搭建(有源码)_第7张图片

知识体系

企业级电商平台-前端搭建(有源码)_第8张图片

开发环境(语言环境+开发工具)

企业级电商平台-前端搭建(有源码)_第9张图片

  • NodeJS 
    • 低运算,高IO
    • 异步编程
    • npm本地缓存
  • Git 
    • win的.gitconfig在用户家目录中
    • git st
    • 企业级电商平台-前端搭建(有源码)_第10张图片
  • Sublime 
    • 企业级电商平台-前端搭建(有源码)_第11张图片
  • 代理软件,解决跨域请求 
    • 企业级电商平台-前端搭建(有源码)_第12张图片

git仓库的创建

企业级电商平台-前端搭建(有源码)_第13张图片

webpack

webpack2不支持ie8的原因:

site.js export default 不被IE8支持,注意default是IE8是关键字不能用。
  • 1

企业级电商平台-前端搭建(有源码)_第14张图片

企业级电商平台-前端搭建(有源码)_第15张图片

webpack对脚本和样式引用的问题

企业级电商平台-前端搭建(有源码)_第16张图片

  • 使用自带的js解析器解析,因为其他loader对ie8不是很友好
  • 使用CommonsChunkPlugin提取公共模块
  • “style-loader”,”css-loader”
  • ExtractTextPlugin
遇到的报错
 UNMET PEER DEPENDENCY 是因为npm3.0不再自动提供合适的版本查找解决依赖,我们可以尝试修改导入的loader版本来解决
  • 1
  • 2
  • 3
WEBPACKENV=dev || online webpack-dev-server  --inline --port 8088
  • 1

打包

git merge origin master
git tag tag-dev-initial
git push origin tag-dev-initial
  • 1
  • 2
  • 3

通用JS工具

企业级电商平台-前端搭建(有源码)_第17张图片

页面布局

企业级电商平台-前端搭建(有源码)_第18张图片

用户模块

企业级电商平台-前端搭建(有源码)_第19张图片

商品模块

企业级电商平台-前端搭建(有源码)_第20张图片

购物车模块和支付宝模块

企业级电商平台-前端搭建(有源码)_第21张图片

线下转线上

企业级电商平台-前端搭建(有源码)_第22张图片

总结

项目源码

https://github.com/Paladinhanxiao/MMall-front-end-web

你可能感兴趣的:(企业级电商平台-前端搭建(有源码))