企业级电商平台-前端搭建

目标

• 整体架构()
• 业务功能实现
• 系统整体可用性，可维护性，可扩展性
  
  • 前后端分离
    
    • API接口交互
  • 分层架构设计
    
    • 
  • 模块化思想
    
    • 
      
      • 架构
      • 
• 工具
  
  • WebPack
  • NodeJS
  • NPM
  • Shell
  • Charles
  • Git

前台

后台

需求分析

技术选型

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

知识体系

开发环境（语言环境+开发工具）

• NodeJS
  
  • 低运算，高IO
  • 异步编程
  • npm本地缓存
• Git
  
  • win的.gitconfig在用户家目录中
  • git st
  • 
• Sublime
  
  • 
• 代理软件，解决跨域请求
  
  • 

git仓库的创建

webpack

webpack2不支持ie8的原因：

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

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

• 使用自带的js解析器解析，因为其他loader对ie8不是很友好
• 使用CommonsChunkPlugin提取公共模块
• “style-loader”,”css-loader”
• ExtractTextPlugin

遇到的报错 UNMET PEER DEPENDENCY 是因为npm3.0不再自动提供合适的版本查找解决依赖，我们可以尝试修改导入的loader版本来解决

WEBPACKENV=dev || online webpack-dev-server  --inline --port 8088

打包

git merge origin mastergit tag tag-dev-initialgit push origin tag-dev-initial

通用JS工具

页面布局

用户模块

商品模块

购物车模块和支付宝模块

线下转线上

总结