webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路

说明

玩转 webpack 学习笔记

商城技术栈选型

前端：

react 全家桶 + webpack + axios + lib-flexible + slick-carousel

后端：

koa + mysql + sequelize

商城架构设计

商城界面 UI 设计

React 全家桶环境搭建

1、初始化项目

npm init -y

2、创建项目目录

创建 actions、reducers、store 等

src/actions/ 放置所有的 actions
src/reducers 放置所有的 reducers
使用 Provider 传递 store，Store 通过 Provider 传递给容器组件

3、安装依赖

安装 react、react-dom、redux、react-redux

npm i react react-dom redux react-redux -S

安装 @babel/core

npm i @babel/core -D

安装 geektime-builder-webpack 用于 webpack 的配置

npm i geektime-builder-webpack -D

这里的脚本都是用的 builder-webpack-geektime 里面的

package.json：

{"name": "shopping-h5","version": "1.0.0","description": "shopping h5","main": "index.js","scripts": {"dev": "webpack-dev-server --config ./node_modules/builder-webpack-geektime/lib/webpack.dev.js --open","build": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.prod.js","build:ssr": "webpack --config ./node_modules/builder-webpack-geektime/lib/webpack.ssr.js"},"keywords": [],"author": "","license": "ISC","dependencies": {"axios": "^0.19.0","lib-flexible": "^0.3.2","react": "^16.8.6","react-dom": "^16.8.6","react-redux": "^7.1.0","react-slick": "^0.25.2","redux": "^4.0.4","redux-logger": "^3.0.6","redux-thunk": "^2.3.0","slick-carousel": "^1.8.1"},"devDependencies": {"@babel/core": "^7.4.4","@babel/plugin-proposal-class-properties": "^7.5.5","@babel/plugin-syntax-dynamic-import": "^7.2.0","@babel/preset-env": "^7.4.4","@babel/preset-react": "^7.0.0","builder-webpack-geektime": "^1.0.3","webpack": "^4.31.0","webpack-cli": "^3.3.2","webpack-dev-server": "^3.3.1"}
}

数据库实体设计

部分表字段

功能开发要点

浏览器端

组件化，组件颗粒度尽可能小
直接复用 builder-webpack-geektime 的构建配置，无需关注构建脚本

服务端

MVC 开发方式，数据库基于 Sequelize
Rest API 风格
采用 JWT 进行鉴权

JSON Web Token 工作原理

谈谈 Web 商城的性能优化策略

渲染优化

首⻚页、列列表⻚页、详情⻚页采⽤用 SSR 或者 Native 渲染
个人中心页预渲染

弱网优化

使用离线包、PWA 等离线缓存技术

Webview 优化

打开 Webview 的同时并行的加载页面数据

代码

有部分代码，可以参考这个：https://github.com/kaimo313/webpack-demo

webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路相关推荐

react全家桶实现招聘app-项目准备（一）
1.1 项目技术 a. 使用react全家桶 + es6 + webpack + antd-mobile b. 采用模块化.组件化.工程化 c. Node + express + mongodb + ...
php商城项目开发视频_ThinkPHP框架开发大型商城项目实战视频教程下载
ThinkPHP框架开发大型商城项目实战视频教程下载教程介绍:ThinkPHP 为了简化企业级应用开发和敏捷WEB应用开发而诞生的一个免费开源的,快速.简单的面向对象的国产轻量级PHP开发框架.框架 ...
计算机网络教程网线制作,图吧小白教程篇二十六：手把手教你自制网线（夹网线水晶头）...
图吧小白教程篇二十六:手把手教你自制网线(夹网线水晶头) 2019-11-19 23:07:38 31点赞 309收藏 27评论创作立场声明:咕咕咕教程最后还是出了,不过咱现在用啥还是直接网购号 ...
黑猫互联云计算机,黑猫评测篇二十六：解决联想轻薄本痛点，3TB性价比NAS方案，联想个人云存储A1评测...
黑猫评测篇二十六:解决联想轻薄本痛点,3TB性价比NAS方案,联想个人云存储A1评测 2020-09-16 13:34:46 5点赞 10收藏 4评论联想小新Pro 13的痛点,终于找到了完美的解 ...
React全家桶项目
开篇利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵.目录结构相当简单.没有数据库,你们运行不起来.想运行起来的话,把express调用数据库的部分全删掉,写死数据. ak47 ...
基于React全家桶开发「网易云音乐PC」项目实战(一)
网易云音乐PC项目实战项目简介 1.项目介绍项目使用到的技术栈 CSS使用Flex进行布局配置路径别名使用: carco 项目路由使用: react-router来管理使用react-rout ...
如何实现一个React全家桶项目（附完整教程及代码）
文章目录如何实现一个React全家桶项目(附完整教程) 1.相关命令: 运行项目: `yarn start` 项目打包: `yarn build` 暴露配置项: `yarn eject` 2.项目目 ...
react全家桶从0搭建一个完整的react项目(react-router4、redux、redux-saga)
react全家桶从0到1(最新) 本文从零开始,逐步讲解如何用react全家桶搭建一个完整的react项目.文中针对react.webpack.babel.react-route.redux.redu ...
【正点原子STM32连载】第六十六章综合测试实验摘自【正点原子】STM32F103 战舰开发指南V1.2
1)实验平台:正点原子stm32f103战舰开发板V4 2)平台购买地址:https://detail.tmall.com/item.htm?id=609294757420 3)全套实验源码+手册+视 ...
人生哲理名言六十六条
一提到哲理好像是老年人的专利,其实年青人多看看和学学哲理也是有好处的.摘录哲理名言共享. 人生哲理名言六十六条: 1人之所以痛苦,在于追求错误的东西. 2如果你不给自己烦恼,别人也永远不可能给你烦恼. ...

webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路

说明

商城技术栈选型

商城架构设计

商城界面 UI 设计

React 全家桶环境搭建

1、初始化项目

2、创建项目目录

3、安装依赖

数据库实体设计

功能开发要点

JSON Web Token 工作原理

谈谈 Web 商城的性能优化策略

代码

webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路相关推荐

最新文章

热门文章

webpack项目篇（六十六）：react 全家桶 和 webpack 开发 h5 商城项目的整体思路

说明

商城技术栈选型

商城架构设计

商城界面 UI 设计

React 全家桶环境搭建

1、初始化项目

2、创建项目目录

3、安装依赖

数据库实体设计

功能开发要点

JSON Web Token 工作原理

谈谈 Web 商城的性能优化策略

代码

webpack项目篇（六十六）：react 全家桶 和 webpack 开发 h5 商城项目的整体思路相关推荐

最新文章

热门文章

webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路

webpack项目篇（六十六）：react 全家桶和 webpack 开发 h5 商城项目的整体思路相关推荐