From 8eb9d49794c121265fc0b1eca8984059d6bafce4 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 05:51:58 +0800 Subject: [PATCH 1/7] =?UTF-8?q?craco=20=E7=89=881?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 - config-overrides.js | 46 --------------------------------------------- craco.config.js | 19 +++++++++++++++++++ package.json | 10 +++++----- 4 files changed, 24 insertions(+), 52 deletions(-) delete mode 100644 config-overrides.js create mode 100644 craco.config.js diff --git a/.eslintignore b/.eslintignore index 468b05e..cd44718 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,5 @@ src/registerServiceWorker.js src/**/test/** -config-overrides.js /build /config src/serviceWorker.js diff --git a/config-overrides.js b/config-overrides.js deleted file mode 100644 index 58b49e4..0000000 --- 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 0000000..523744f --- /dev/null +++ b/craco.config.js @@ -0,0 +1,19 @@ +// const sassResourcesLoader = require('craco-sass-resources-loader') +const path = require('path') + +const resolve = (dir) => path.join(__dirname, dir) + +module.exports = { + webpack: { + alias: { + '@': resolve('src'), + }, + }, + babel: { + plugins: [ + ['import', { libraryName: 'antd', style: true }], + ['@babel/plugin-proposal-decorators', { legacy: true }], + ], + }, + plugins: [], +} diff --git a/package.json b/package.json index 9dcc2c2..abcdaf1 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", @@ -30,10 +31,10 @@ "web-vitals": "^1.1.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 +78,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" -- Gitee From 1d5071db44aca3e07fd5cc6ec0695fdd74746a5d Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 06:06:04 +0800 Subject: [PATCH 2/7] =?UTF-8?q?=E5=BF=BD=E7=95=A5webstorm=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 82c1b4c..9c8cf76 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ .AppleDouble .LSOverride node_modules/ +.idea/ # Icon must end with two \r -- Gitee From a4247a94b8961ab01cab7d0a9ff9d6c668a7038a Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 06:12:14 +0800 Subject: [PATCH 3/7] =?UTF-8?q?eslint=E5=BF=BD=E7=95=A5carco=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 1 + craco.config.js | 8 ++++---- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.eslintignore b/.eslintignore index cd44718..29a10d6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,5 +1,6 @@ src/registerServiceWorker.js src/**/test/** +craco.config.js /build /config src/serviceWorker.js diff --git a/craco.config.js b/craco.config.js index 523744f..3a17379 100644 --- a/craco.config.js +++ b/craco.config.js @@ -6,14 +6,14 @@ const resolve = (dir) => path.join(__dirname, dir) module.exports = { webpack: { alias: { - '@': resolve('src'), - }, + '@': resolve('src') + } }, babel: { plugins: [ ['import', { libraryName: 'antd', style: true }], - ['@babel/plugin-proposal-decorators', { legacy: true }], + ['@babel/plugin-proposal-decorators', { legacy: true }] ], }, - plugins: [], + plugins: [] } -- Gitee From d0e1a99f3201aabbc4f19550e2bf126c1128c560 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9F=A9=E7=A3=8A?= Date: Tue, 17 Aug 2021 17:44:48 +0800 Subject: [PATCH 4/7] =?UTF-8?q?craco=E9=85=8D=E7=BD=AE=E7=89=882?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 新增环境区分 2. 新增打包分析，打包进度， 3. 配置别名 4. ant按需加载 5. dayjs antd替换掉momentjs antd --- craco.config.js | 64 +++++++++++++++++++++++++++++++++++++++++++------ package.json | 4 +++- 2 files changed, 60 insertions(+), 8 deletions(-) diff --git a/craco.config.js b/craco.config.js index 3a17379..36c3beb 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,19 +1,69 @@ -// const sassResourcesLoader = require('craco-sass-resources-loader') -const path = require('path') +/* 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 resolve = (dir) => path.join(__dirname, dir) +// 判断编译环境是否为生产 +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') - } + '@': resolve('src'), + '@api': resolve('src/api'), + '@assects': resolve('src/assets'), + '@compontents': resolve('src/compontents'), + '@config': resolve('src/config'), + '@hooks': resolve('src/hooks'), + '@hooks': resolve('src/interface'), + '@hooks': resolve('src/layouts'), + '@hooks': resolve('src/model'), + '@hooks': resolve('src/router'), + '@hooks': resolve('src/store'), + '@hooks': resolve('src/styles'), + '@hooks': resolve('src/typings'), + '@hooks': resolve('src/utils'), + '@hooks': resolve('src/views'), + }, + plugins: [ + // 观察打包进度 + new SimpleProgressWebpackPlugin(), + // 时间转换工具采取day替换moment + new AntdDayjsWebpackPlugin(), + ...when( + !isProduction, () => [ + // 打包分析，生产环境关闭 + new BundleAnalyzerPlugin() + ], [] + ), + ] }, babel: { plugins: [ - ['import', { libraryName: 'antd', style: true }], + // AntDesign 按需加载 + ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], + // 用来支持装饰器 ['@babel/plugin-proposal-decorators', { legacy: true }] ], }, - plugins: [] + plugins: [ + // { + // plugin: FastRefreshCracoPlugin + // } + ] } diff --git a/package.json b/package.json index abcdaf1..598c084 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,9 @@ "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": "craco start", -- Gitee From d749035db54e02020c10868fb32a334d3fb33137 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Tue, 17 Aug 2021 21:42:02 +0800 Subject: [PATCH 5/7] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=83=A8=E5=88=86?= =?UTF-8?q?=E9=94=99=E8=AF=AF=EF=BC=8C=E6=B3=A8=E9=87=8A=E6=8E=89=E6=89=93?= =?UTF-8?q?=E5=8C=85=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- craco.config.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/craco.config.js b/craco.config.js index 36c3beb..7378967 100644 --- a/craco.config.js +++ b/craco.config.js @@ -30,15 +30,15 @@ module.exports = { '@compontents': resolve('src/compontents'), '@config': resolve('src/config'), '@hooks': resolve('src/hooks'), - '@hooks': resolve('src/interface'), - '@hooks': resolve('src/layouts'), - '@hooks': resolve('src/model'), - '@hooks': resolve('src/router'), - '@hooks': resolve('src/store'), - '@hooks': resolve('src/styles'), - '@hooks': resolve('src/typings'), - '@hooks': resolve('src/utils'), - '@hooks': resolve('src/views'), + '@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: [ // 观察打包进度 @@ -48,7 +48,7 @@ module.exports = { ...when( !isProduction, () => [ // 打包分析，生产环境关闭 - new BundleAnalyzerPlugin() + // new BundleAnalyzerPlugin() ], [] ), ] -- Gitee From 63f072a84c37e752eb6def470c7346567bdaa1b0 Mon Sep 17 00:00:00 2001 From: Casper <2529670555@qq.com> Date: Wed, 18 Aug 2021 00:11:07 +0800 Subject: [PATCH 6/7] =?UTF-8?q?readme=E7=89=881?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 271 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 200 insertions(+), 71 deletions(-) diff --git a/README.md b/README.md index 949e7c1..050a6c2 100644 --- a/README.md +++ b/README.md @@ -1,71 +1,200 @@ -# 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) +# Vue 3 + Typescript + Vite +商城管理后台 + +[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) +- [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/) +ahooks | 一个React Hooks库 | [https://ahooks.js.org/zh-CN/](https://ahooks.js.org/zh-CN/) +Mobx | 简单、可扩展的状态管理 | [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/) +Tinymce | 可视化HTML编辑器 | [https://www.tiny.cloud/](https://www.tiny.cloud/) +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 // 全局配置 + ├─interface // 全局Interface + ├─layout // 布局文件 + ├─router // 路由 + ├─store // Vuex + ├─styles // CSS + ├─utils // 公共方法目录 + └─views // 页面 + ├─common // 常用操作 + ├─dashboard // 首页 + ├─login // 登录 + ├─order // 订单管理 + ├─error // 404, 403 + ├─product // 商品管理 + ├─system // 系统设置 + └─user // 用户设置 +``` + +需要注意的点： + +- `@/components`已做批量绑定全局组件处理 +- `@/config/app.js`：所有后期不会变化的数据 +- `@/layout` 登录之后整个页面的组件放置处，比如头部导航`@/layout/pages/Navbar.vue`，左侧菜单`@/layout/pages/Sidebar.vue`，中间主区域的 +- `@/layout/pages/AppMain.vue` `router-view`占位， +- 右边滑出的设置面板`@/layout/pages/AppSettings.vue`等等。 + `@/main.js 中 render`函数已经渲染一个视图提供给el挂载，对应的路由就是根级路由，对应的视图就是`@/App.vue` 当中`router-view`，而`AppMain.vue`中对应的路由应该是`children`，视图就是`component: () => import('@/views/dashboard/index')`： +```javascript + +const pre = '/index/' +export default [ + { + path: '/', + component: Layout, + redirect: { name: 'dashboard' }, + children: [ + { + path: `/dashboard`, + name: 'dashboard', + title: '公告板', + component: () => import('@/views/dashboard/index'), + meta: { title: 'Dashboard', icon: 'dashboard', affix: true } + } + ] + } +] +``` +- `router` + 空路由的处理 +```javascript +export default [ + { + path: '/404', + component: () => import('@/views/other/404'), + hidden: true + }, + { + path: '*', + redirect: '/404', + hidden: true + } +] +``` + +- `store` 不建议把所有的数据都放到store中来管理，无跨组件单路由数据就在当前路由处理。 +- `styles` 为了方便全局引入相关的scss变量，vuecli3也提供了相应的方法[addStyleResource()](https://cli.vuejs.org/zh/guide/css.html#%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8)，此项目中引入了：`_variables.scss, mixins.scss`方便全局内直接引用文件中的变量。 +- `utils` 是所有公共方法集合，基本为业务无关方法。 +- `views` 所有routes对应页面集合 + +### 开发约定 +除了eslint之外的约定(若第三方参数违反约定，可以单行关闭`/*eslint-disable */`)： + +- 根据前面的阐述，全局组件的增加，只要`@/components`中按驼峰式命名填加，其它的文件不用修改。 +- views中超过2个语义的文件夹用中划线连接，`components`文件中单词用驼峰式，且首字母大写，文件名小写字母为路由映射文件，大写字母为组件引用文件。 +- 所有组件名、css相关属性起始字母app，比如``就单一组件名称，`