新增vitepress文档

.github/workflows/build-and-release.yml

@@ -1,4 +1,4 @@
-name: crawler-client
+name: electron-react
 
 on:
   push:

.vitepress/config.mjs

@@ -6,21 +6,32 @@ export default defineConfig({
   lang: 'zh-CN',
   title: "electron-react脚手架",
   description: "electron-react 文档",
+  head: [
+    ['link', { rel: 'icon', href: 'https://vitepress.dev/vitepress-logo-large.webp' }],
+    ["meta", {name:"referrer", content:"no-referrer"}],
+  ],
   themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
+      { text: '首页', link: '/' },
+      { text: '示例', link: '/markdown-examples' }
     ],
-
     sidebar: [
-      {
-        text: 'Examples',
+      {text: '简介', link: '/docs/introduction/index'},
+      { text: '快速开始', link: '/docs/getting-started/index'},
+      { text: '开发',collapsed:false, link: '/docs/getting-started/index',
+        items: [
+          { text: '项目结构', link: '/docs/development/project-structure' },
+          { text: '渲染进程', link: '/docs/development/rendering-process' },
+          { text: '主进程', link: '/docs/development/main-process' },
+          { text: 'create-react-app配置', link: '/docs/development/cra-setting' },
+        ]
+      },
+      { text: '部署',collapsed:false, link: '/docs/getting-started/index',
         items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
+          { text: '生产编译', link: '/docs/development/project-structure' },
+          { text: '桌面应用更新', link: '/docs/development/rendering-process' },
         ]
-      }
+      },
     ],
 
     socialLinks: [

craco.config.js

@@ -18,15 +18,15 @@ module.exports = {
   webpack: {
     alias: {
       '@': path.resolve('src'),
-      '@statics': path.resolve(__dirname, 'src/statics'),
-      '@views': path.resolve(__dirname, 'src/views'),
-      '@comp': path.resolve(__dirname, 'src/components'),
-      '@services': path.resolve(__dirname, 'src/services'),
-      '@api': path.resolve(__dirname, 'src/api'),
-      '@utils': path.resolve(__dirname, 'src/utils'),
-      '@redux': path.resolve(__dirname, 'src/redux'),
-      '@styles': path.resolve(__dirname, 'src/styles'),
-      '@configs': path.resolve(__dirname, 'src/configs'),
+      '@statics': path.resolve(__dirname, 'src/renderer/statics'),
+      '@views': path.resolve(__dirname, 'src/renderer/views'),
+      '@comp': path.resolve(__dirname, 'src/renderer/components'),
+      '@services': path.resolve(__dirname, 'src/renderer/services'),
+      '@api': path.resolve(__dirname, 'src/renderer/api'),
+      '@utils': path.resolve(__dirname, 'src/renderer/utils'),
+      '@redux': path.resolve(__dirname, 'src/renderer/redux'),
+      '@styles': path.resolve(__dirname, 'src/renderer/styles'),
+      '@configs': path.resolve(__dirname, 'src/renderer/configs'),
     },
     publicPath: "/",
     plugins: [

docs/development/project-structure.md

@@ -0,0 +1,43 @@
+# 项目结构
+
+使用者可以参考我的项目结构进行微调或者改造.
+
+## 项目结构
+```
+├── electron-react         # 桌面应用
+├── build                  # web包编译后资源目录
+├── extraResources         # 视窗额外打包文件（比如各种执行的cmd/python脚本）
+├── public                 # web包编译前资源目录
+├── release                # 视窗编译输出目录
+├── scripts                # 视窗安装/卸载脚本目录（包括nsis脚本等）
+├── src                    # web前端代码目录
+│   ├── main/                 # 视窗主进程相关
+│   │   ├── main.js              # 主进程代码
+│   │   ├── preload.js           # 预加载脚本（进程通信）
+│   ├── renderer/             # 视窗渲染进程相关
+│   │   ├── entry/               # web项目根目录（比如根节点root入口文件）
+│   │   ├── components/          # 公共组件目录
+│   │   ├── configs/             # 全局配置目录
+│   │   ├── i18n/                # 国际化（暂时没用上）
+│   │   ├── layout/              # 布局文件目录
+│   │   ├── models/              # 数据处理目录
+│   │   ├── utils/               # 工具类目录
+│   │   ├── redux/               # 状态机管理目录
+│   │   ├── routers/             # 路由配置目录
+│   │   ├── api/                 # 请求服务目录 
+│   │   ├── statics/             # 渲染进程静态资源目录 
+│   │   ├── tests/               # e2e测试目录 
+│   │   ├── mock/                # 模拟数据目录   
+│   │   └── views/               # UI界面目录       
+│   ├── staic/                # 公共资源类
+│   ├── utils/                # 公共工具类
+├── env.development        # 开发环境配置
+├── env.production         # 生产环境配置
+├── env.test               # 测试环境配置
+├── static                 # 桌面应用静态资源
+├── .gitignore             # git忽略配置
+├── craco.config.js        # webpack配置
+├── electron-builder.yml   # electron生产编译配置
+├── package.json           # 依赖表
+└── webstorm.config        # webstorm配置
+```

docs/development/rendering-process.md

@@ -0,0 +1,20 @@
+# 渲染进程
+
+使用者可以参考我的项目结构进行微调或者改造.
+
+## 渲染进程相关
+
+```
+1、脚手架采用官方cli - create-react-app
+2、状态管理工具为redux 的 react适配版 react-redux 和 @reduxjs/toolkit
+3、异步工具为 redux-saga
+4、数据传递和控制渲染采用 @reduxjs/toolkit 下的 reselect
+5、路由采用 react-router-dom
+6、样式建议采用 styled-components 和 less
+7、开发调试日志采用 redux-logger
+8、项目配置采用 craco
+9、UI库建议 antd，图表 是 echarts
+10、环境变量从 process.env.REACT_APP_ENVIRONMENT 中获取（development - 开发， test - 测试， production - 生产），
+    主要是 react 的 NODE_ENV无法像vue一样被脚本覆盖
+
+```

docs/getting-started/index.md

@@ -0,0 +1,19 @@
+# 快速开始
+
+通过这个教程，你的app将会打开一个浏览器窗口，来展示包含当前正在运行的 Chromium, Node.js与 Electronweb等版本信息的web界面
+
+## 创建你的应用程序
+
+```shell
+
+# 从仓库模版创建
+git clone https://github.com/liumengniu/electron-react.git
+cd electron-react
+npm i
+npm run start
+
+#从
+
+```
+
+完成上述步骤后，您应该有一个功能齐全的Electron程序，如下所示：

docs/introduction/index.md

@@ -0,0 +1,10 @@
+# 概要
+
+`基于react + cra 来构造 electron 应用程序的样板代码.`
+
+该项目的目的，是为了要避免使用 react 手动建立起 electron 应用程序。electron-react 充分利用 creat-react-app 作为脚手架工具，
+加上拥有 creat-react-app 的 webpack, 生产编译即更新的 electron-builder，以及一些最常用的插件，如react-router-dom、redux、redux-saga 等等。
+
+## 在这里查看其他文档
+
+

index.md

@@ -3,23 +3,26 @@
 layout: home
 
 hero:
-  name: "My Awesome Project"
-  text: "A VitePress Site"
-  tagline: My great project tagline
+  name: "electron-react脚手架"
+  text: "electron-react脚手架文档"
+  tagline: 简单易上手的的electron+react脚手架
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: 概念
+      link: /docs/introduction/index
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: 快速开始
+      link: /docs/getting-started/index
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - icon: ⚡️
+    title: 简单易上手
+    details: 仅需一行命令即可开始，省去了各种配置时间
+  - icon: 🚀
+    title: 极简配置
+    details: 删去了各种复杂的依赖和库，仅保留了渲染进程和主进程，方便自定义开发，心智负担小
+  - icon: 📝
+    title: 该有的都有
+    details: 进程通信基础方法，各个环境（包括amd和ram架构，甚至国产麒麟系统）的配置，自动更新的方法等
 ---
 

public/index.html

@@ -8,7 +8,7 @@
     <meta name="description" content="Web site created using create-react-app"/>
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>electron基础应用</title>
+    <title>electron-react脚手架</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

src/utils/index.js

@@ -4,9 +4,7 @@
  * @Date:
  */
 
-import _ from 'lodash'
-import TokenManager from '@utils/TokenManager'
-import { downLoadFile } from '@services/base'
+import { downLoadFile } from '@/renderer/api/base'
 
 const utils = {
 	/**

src/utils/request.js

@@ -11,7 +11,7 @@
 
 import _ from 'lodash'
 import qs from 'qs'
-import TokenManager from '@utils/TokenManager'
+import TokenManager from '@/utils/TokenManager'
 import {useNavigate} from "react-router-dom";
 
 let mock = false

webstorm.config.js

@@ -11,15 +11,15 @@ module.exports = {
 		extensions: ['.js', '.vue', '.json'],
 		alias: {
 			'@': path.resolve('src'),
-			'@statics': path.resolve(__dirname, 'src/statics'),
-			'@views': path.resolve(__dirname, 'src/views'),
-			'@comp': path.resolve(__dirname, 'src/components'),
-			'@services': path.resolve(__dirname, 'src/services'),
-			'@api': path.resolve(__dirname, 'src/api'),
-			'@utils': path.resolve(__dirname, 'src/utils'),
-			'@redux': path.resolve(__dirname, 'src/redux'),
-			'@styles': path.resolve(__dirname, 'src/styles'),
-			'@configs': path.resolve(__dirname, 'src/configs'),
+			'@statics': path.resolve(__dirname, 'src/renderer/statics'),
+			'@views': path.resolve(__dirname, 'src/renderer/views'),
+			'@comp': path.resolve(__dirname, 'src/renderer/components'),
+			'@services': path.resolve(__dirname, 'src/renderer/services'),
+			'@api': path.resolve(__dirname, 'src/renderer/api'),
+			'@utils': path.resolve(__dirname, 'src/renderer/utils'),
+			'@redux': path.resolve(__dirname, 'src/renderer/redux'),
+			'@styles': path.resolve(__dirname, 'src/renderer/styles'),
+			'@configs': path.resolve(__dirname, 'src/renderer/configs'),
 		}
 	}
 }