diff --git a/.eslintignore b/.eslintignore
index 468b05e9b3bf01d352d38740d41501137c5e526f..29a10d6f6c0c0ebe7cd4586eb6a691d45ca96b6c 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,6 +1,6 @@
src/registerServiceWorker.js
src/**/test/**
-config-overrides.js
+craco.config.js
/build
/config
src/serviceWorker.js
diff --git a/.gitignore b/.gitignore
index 82c1b4cc58752f6a834b3304e2aea92f674ac7e7..9c8cf7644ff7f8782cf08b017fce40fd02ac43b0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@
.AppleDouble
.LSOverride
node_modules/
+.idea/
# Icon must end with two \r
diff --git a/README.md b/README.md
index 949e7c15879fbaed46b3226144e441a50a0aa69d..478a567b2f4b76c8f0f80bd71eb8430cf2b855aa 100644
--- a/README.md
+++ b/README.md
@@ -1,71 +1,202 @@
-# Getting Started with Create React App
-
-这是一个关于baby的故事
-
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
-
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
-
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
-
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# React + Typescript + craco
+商城管理后台
+
+[comment]: <> (- [Admin - 在线预览](http://demo.vyan.top/vue3-store-admin/))
+
+[comment]: <> (- [H5 - 在线预览](http://demo.vyan.top/vue3-store-h5/))
+- [产品原型](https://www.xiaopiu.com/web/byId?type=project&id=5b08d8e6f57b373a03dd5d67)
+- [接口文档地址](http://139.198.172.231:8490/api/api.html)
+- [react-store-admin - 任务看板](https://gitee.com/jsfront/react-store-admin/board)
+- [React-store-admin](https://gitee.com/jsfront/react-store-admin)
+- [API-store-server](https://gitee.com/jsfront/store-server)
+
+## 技术栈
+
+技术 | 说明 | 官网
+----|----|----
+craco | 前端开发与构建工具 | [https://github.com/gsoft-inc/craco](https://github.com/gsoft-inc/craco)
+React | 用于构建用户界面的JavaScript库 | [https://react.docschina.org/](https://react.docschina.org/docs/getting-started.html)
+React router | 官方的路由管理器 | [http://react-guide.github.io/react-router-cn/](http://react-guide.github.io/react-router-cn/)
+React Hooks | React状态管理 | [https://react.docschina.org/docs/hooks-intro.html](https://react.docschina.org/docs/hooks-intro.html)
+ahooks | 一个React Hooks库 | [https://ahooks.js.org/zh-CN/](https://ahooks.js.org/zh-CN/)
+Mobx | 简单、可扩展的React状态管理 | [https://cn.mobx.js.org/](https://cn.mobx.js.org/)
+Axios | 基于promise 的HTTP 库 | [https://github.com/axios/axios](https://github.com/axios/axios)
+Ant Design | 前端UI组件库 | [https://2x.antdv.com/](https://2x.antdv.com/)
+Mockjs | 生成数据 | [http://mockjs.com/](http://mockjs.com/)
+SCSS | CSS预处理器 | [https://sass-lang.com/](https://sass-lang.com/)
+Dayjs | 代替Momentjs日期库 | [https://dayjs.gitee.io/zh-CN/](https://dayjs.gitee.io/zh-CN/)
+@icon-park/react | 字节图标库 *1 | [https://iconpark.oceanengine.com/](https://iconpark.oceanengine.com/)
+
+*1. `icon-park/react`使用方法 | [https://github.com/bytedance/IconPark/tree/master/packages/react](https://github.com/bytedance/IconPark/tree/master/packages/react)
+
+
+### 开发工具
+
+#### Windows
+
+名称 | 工具 | 官网
+----|----|----
+VScode | 主开发工具 | [https://code.visualstudio.com/](https://code.visualstudio.com/)
+Webstorm | 辅开发工具 | [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/)
+Atom | 源码阅读工具 | [https://atom.io/](https://atom.io/)
+Cmder | Cmd替代工具[windows] | [https://cmder.net/](https://cmder.net/)
+Notepad2 | 临时单文件编辑[windows] | [http://www.flos-freeware.ch/notepad2.html](http://www.flos-freeware.ch/notepad2.html)
+Chrome | 调试工具 | [https://www.google.com/intl/zh-CN/chrome/](https://www.google.com/intl/zh-CN/chrome/)
+
+#### Mac
+
+名称 | 工具 | 官网
+----|----|----
+Iterm2 | Mac OS终端利器[Mac] | [https://iterm2.com/](https://iterm2.com/)
+
+
+## 文件结构
+
+```javascript
+├─dist // 上线发布目录
+├─public // 公共资源目录
+└─/
+ ├─api // 所有请求方法
+ ├─assets // 资源目录
+ ├─components // 全局组件
+ ├─config // 全局配置
+ ├─hooks //
+ ├─interface // 全局Interface
+ ├─layouts // 布局文件
+ ├─model //
+ ├─router // 路由
+ ├─store // Mobx
+ ├─styles // CSS
+ ├─typings //
+ ├─utils // 公共方法目录
+ └─views // 页面
+ ├─common // 常用操作
+ ├─dashboard // 首页
+ ├─login // 登录
+ ├─order // 订单管理
+ ├─error // 404, 403
+ ├─product // 商品管理
+ ├─system // 系统设置
+ └─user // 用户设置
+```
+
+需要注意的点：
+
+- `@/components`已做批量绑定全局组件处理
+- `@/config/app.js`：所有后期不会变化的数据
+- `@/layout` 登录之后整个页面的组件放置处，比如头部导航`@/layout/Header`，左侧菜单`@/layout/Sider`，中间主区域的
+- `@/layout/Content`等，
+
+```javascript
+
+const pre = '/index/'
+export default [
+ {
+ path: '/',
+ component: Layout,
+ redirect: { name: 'dashboard' },
+ children: [
+ {
+ path: `/dashboard`,
+ name: 'dashboard',
+ title: '公告板',
+ component: () => import('@/views/dashboard/index'),
+ }
+ ]
+ }
+]
+```
+- `router`
+ 空路由的处理
+```javascript
+export default [
+ {
+ path: '/404',
+ component: () => import('@/views/other/404'),
+ hidden: true
+ },
+ {
+ path: '*',
+ redirect: '/404',
+ hidden: true
+ }
+]
+```
+
+- `store` 不建议把所有的数据都放到store中来管理，无跨组件单路由数据就在当前路由处理。
+- `styles` 为了方便全局引入相关的scss变量，，此项目中引入了：`_variables.scss, mixins.scss`方便全局内直接引用文件中的变量。
+- `utils` 是所有公共方法集合，基本为业务无关方法。
+- `views` 所有routes对应页面集合
+
+### 开发约定
+除了eslint之外的约定(若第三方参数违反约定，可以单行关闭`/*eslint-disable */`)：
+
+- 根据前面的阐述，全局组件的增加，只要`@/components`中按驼峰式命名填加，其它的文件不用修改。
+- views中超过2个语义的文件夹用中划线连接，`components`文件中单词用驼峰式，且首字母大写，文件名小写字母为路由映射文件，大写字母为组件引用文件。
+- 所有组件名、css相关属性起始字母app，比如``就单一组件名称，``为login容器，备选名称为：`ui`。
+
+### 待开发的
+
+#### 1. 一期
+
+##### 1.1 登录
+
+- [x] 根据token登录
+- [x] 获取登录图形验证码
+- [x] 获取当前用户信息
+- [x] 过期刷新token
+- [x] Dashboard 信息展示（订单统计信息，模块新闻显示）
+
+##### 1.2 角色权限
+
+- [ ] 角色管理
+- [ ] 角色菜单管理
+- [ ] 角色菜单显示控制
+
+##### 1.3 订单管理
+
+- [ ] 订单列表
+- [ ] 订单查询
+- [ ] 发货管理
+- [ ] 售后管理
+- [ ] 评价管理
+- [ ] 配送管理
+- [ ] 订单设置
+
+##### 1.4 设置
+
+- [ ] 个人信息管理
+- [ ] 修改密码
+
+##### 1.5 商品管理
+
+- [ ] 商品列表
+- [ ] 商品分类
+
+#### 2. 二期
+
+##### 2.1 店铺管理
+
+- [ ] 店铺概况
+- [ ] 店铺装修
+- [ ] 广告管理
+
+##### 2.2 会员管理
+
+- [ ] 会员统计
+- [ ] 会员列表
+- [ ] 会员卡管理
+
+##### 2.3 系统设置
+
+- [ ] 店铺信息管理
+- [ ] 管理员信息管理
+- [ ] 床铺、交易等信息设置
+
+#### 3. 三期
+
+##### 3.1 营销管理
+
+- [ ] 秒杀管理
+- [ ] 优惠券管理
+- [ ] 拼图管理
diff --git a/config-overrides.js b/config-overrides.js
deleted file mode 100644
index 58b49e4d3b7487585e2655671e9d623e005058ba..0000000000000000000000000000000000000000
--- a/config-overrides.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/* eslint-disable */
-const { override, addWebpackAlias, fixBabelImports, addWebpackPlugin, adjustStyleLoaders } = require('customize-cra')
-const path = require('path')
-const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
-
-if (process.env.NODE_ENV === 'production') {
- process.env.GENERATE_SOURCEMAP = 'false'
-}
-
-function resolve(dir) {
- return path.join(__dirname, dir)
-}
-
-const addCustomize = () => (config) => {
- return config
-}
-
-module.exports = override(
- fixBabelImports('import', {
- libraryName: 'antd',
- libraryDirectory: 'es',
- style: true // 自动打包相关的样式
- }),
-
- // 配置路径别名
- addWebpackAlias({
- '@': resolve('src')
- }),
-
- // 替换moment.js
- addWebpackPlugin(new AntdDayjsWebpackPlugin()),
-
- adjustStyleLoaders((rule) => {
- if (rule.test.toString().includes('scss')) {
- rule.use.push({
- loader: require.resolve('sass-resources-loader'),
- options: {
- resources: [
- './src/styles/_variables.scss', //这里是你自己放公共scss变量的路径
- './src/styles/_mixins.scss',
- ]
- }
- })
- }
- })
-)
diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 0000000000000000000000000000000000000000..737896701c3a2d4e0b267eb058d2e6e1b8a97a36
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,69 @@
+/* craco.config.js */
+/**
+ * TODO: 区分环境 —— NODE_ENV
+ * - whenDev ☞ process.env.NODE_ENV === 'development'
+ * - whenTest ☞ process.env.NODE_ENV === 'test'
+ * - whenProd ☞ process.env.NODE_ENV === 'production'
+ */
+ const { when, whenDev, whenProd, whenTest } = require('@craco/craco')
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
+const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin')
+// const FastRefreshCracoPlugin = require('craco-fast-refresh')
+const path = require('path');
+
+// 判断编译环境是否为生产
+const isProduction = process.env.NODE_ENV === 'production'
+
+if (isProduction) {
+ process.env.GENERATE_SOURCEMAP = 'false'
+}
+
+const resolve = (dir) => path.join(__dirname, dir);
+
+module.exports = {
+ webpack: {
+ alias: {
+ '@': resolve('src'),
+ '@api': resolve('src/api'),
+ '@assects': resolve('src/assets'),
+ '@compontents': resolve('src/compontents'),
+ '@config': resolve('src/config'),
+ '@hooks': resolve('src/hooks'),
+ '@interface': resolve('src/interface'),
+ '@layouts': resolve('src/layouts'),
+ '@model': resolve('src/model'),
+ '@router': resolve('src/router'),
+ '@store': resolve('src/store'),
+ '@styles': resolve('src/styles'),
+ '@typings': resolve('src/typings'),
+ '@utils': resolve('src/utils'),
+ '@views': resolve('src/views'),
+ },
+ plugins: [
+ // 观察打包进度
+ new SimpleProgressWebpackPlugin(),
+ // 时间转换工具采取day替换moment
+ new AntdDayjsWebpackPlugin(),
+ ...when(
+ !isProduction, () => [
+ // 打包分析，生产环境关闭
+ // new BundleAnalyzerPlugin()
+ ], []
+ ),
+ ]
+ },
+ babel: {
+ plugins: [
+ // AntDesign 按需加载
+ ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
+ // 用来支持装饰器
+ ['@babel/plugin-proposal-decorators', { legacy: true }]
+ ],
+ },
+ plugins: [
+ // {
+ // plugin: FastRefreshCracoPlugin
+ // }
+ ]
+}
diff --git a/package.json b/package.json
index 9dcc2c266b38656e947a1767d8b2e3ef4b55adad..598c084170b401ba331b8caa70f4f644e0650ab0 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"homepage": "/react-store-admin",
"dependencies": {
"@ant-design/icons": "^4.6.2",
+ "@craco/craco": "^6.2.0",
"@icon-park/react": "^1.3.3",
"@types/node": "^15.12.4",
"@types/react": "^17.0.11",
@@ -27,13 +28,15 @@
"react-scripts": "4.0.3",
"react-transition-group": "^4.4.2",
"screenfull": "^5.1.0",
- "web-vitals": "^1.1.2"
+ "simple-progress-webpack-plugin": "^2.0.0",
+ "web-vitals": "^1.1.2",
+ "webpack-bundle-analyzer": "^4.4.2"
},
"scripts": {
- "start": "react-app-rewired start",
- "build": "react-app-rewired --max-old-space-size=4096 build",
- "test": "react-app-rewired test",
- "eject": "react-app-rewired eject",
+ "start": "craco start",
+ "build": "craco --max-old-space-size=4096 build",
+ "test": "craco test",
+ "eject": "react-scripts eject",
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ."
},
"eslintConfig": {
@@ -77,7 +80,6 @@
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"node-sass": "^6.0.0",
- "react-app-rewired": "^2.1.8",
"sass-resources-loader": "^2.2.3",
"typescript": "^4.3.4",
"typescript-plugin-css-modules": "^3.4.0"