diff --git a/README.md b/README.md index 5a2c71cc83320dae3b2f86cbe69330b066a4e518..da45b5ba92f317951d7472eced6bdaff9ab734ba 100644 --- a/README.md +++ b/README.md @@ -1,144 +1,146 @@ -# electron-react-antd-antv-sqlite3-cli - -一个集成electron、react、antd、antv、sqlite3的开发脚手架，便于快速搭建基于react开发的electron桌面应用，本项目只针对Windows环境 - -> 该项目是集成sqlite3数据库的`electron-react-antd-antv-cli`的衍生项目，在实际开发中遇到了自带打包数据库的问题和`sqlite3`包不能直接使用的问题，考虑到多平台编译的缘故，把项目抽离开。 - -## 环境依赖 - -* nodejs [未安装可参考](https://herberthe.gitee.io/2020/01/26/Nodejs%E5%AE%89%E8%A3%85%E8%8B%A5%E5%B9%B2%E9%97%AE%E9%A2%98%E9%81%BF%E5%9D%91/) -* node-gyp -* windows-build-tools - -> 关于electron的镜像，electron7.x之后需要设置单独的镜像，不然会安装报错；根据官方文档，中国地区镜像为: `https://cdn.npm.taobao.org/dist/electron/`，我参考过很多的教程仅发现一篇编译成功并且叙述详细，所遇到的问题和解决方式和这篇帖子几乎完全相同 [electron+sqlite3的一起使用](https://blog.csdn.net/zoepriselife316/article/details/89954383) - -在Windows的环境下命令为: - -```shell -# 关于electron -npm config set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" - -# 验证设置 -npm config ls - -# 成功配置输出 -# ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" - - -# 关于node-gyp和windows-build-tools -# 全局安装node-gyp -npm install node-gyp -g - -# 全局安装windows-build-tools -npm install windows-build-tools -g - -# 安装windows-build-tools的时候会自动检查安装python2.x这个依赖，之前安装node-sass的时候我碰到过这个问题，怕麻烦的话提前装个vs2015，其实只是需要一个visual C++ Build Tools而已。。。 -``` - -> 上面`visual C++ Build Tools`可以参考这个同学的文章 [Microsoft Visual C++ Build Tools下载/解决Visual C++ 14.0 is required问题](https://blog.csdn.net/antizheng/article/details/88633912)，点击这直接下载安装 [Visual C++ Build Tools 2015](http://go.microsoft.com/fwlink/?LinkId=691126)，这个都是Windows环境下的问题，`electron-rebuild`这个依赖在Windows10下编译`sqlite3`是报错的 - -## 更新记录 - -> 请参考GitHub: [HerbertHe/electron-react-antd-antv-cli](https://github.com/HerbertHe/electron-react-antd-antv-cli), Gitee: [HerbertHe/electron-react-antd-antv-cli](https://gitee.com/HerbertHe/electron-react-antd-antv-cli) - -## 快速使用 - -* `clone` 仓库 - -```shell -# github -git clone https://github.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git - -# gitee -git clone https://gitee.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git -``` - -> 已提供开发工具`Edever`做更便捷的下载管理，请参考文档使用Gitee: [HerbertHe/Edever](https://gitee.com/HerbertHe/Edever), GitHub: [HerbertHe/Edever](https://github.com/HerbertHe/Edever) - -* 进入仓库 - -* 下载依赖，会花费一些时间请耐心等待 - -```shell -yarn -``` - -* 命令行打开进入sqlite3所在的目录 `node_modules/sqlite3` - -```shell -cd node_modules/sqlite3 -``` - -* 编译sqlite3（只针对Windows系统） - -> 根据你的实际需求更改下述的命令，我在node的脚本命令里已经提供了针对于本项目依赖的命令请参考执行，命令解析请参考下面的参考项目 - -```shell -# 32位操作系统 -yarn run sqlite3:ia32 - -# 64位操作系统 -yarn run sqlite3:x64 -``` - -* 验证安装 - -```shell -yarn run ele:dev -``` - -## 关于项目 - -查看项目从`package.json`开始，项目的`README.md`可能更新不及时 - -1. 已提供的指令 - - ```shell - "react:dev": "启动react的预览", - "react:build": "构建react的产物", - "react:test": "react测试", - "react:eject": "react-scripts eject", - "ele:dev": "启动electron开发预览", - "sqlite3:ia32": "编译sqlite3为32位环境", - "sqlite3:x64": "编译sqlite3为64位环境" - # 下面详述包及自定义配置，目前只针对electron的开发做了脚本 - ``` - - ```shell - # 项目启动后在任何时间都可以在命令行输入rs回车使用nodemon强制项目更新 - rs - # Ctrl + c后输入y即可退出命令行启动预览环境 - ``` - - 具体命令解析: - - ```shell - node-gyp rebuild --target=7.1.11 --arch=x64 --target_platform=darwin --dist-url=https://atom.io/download/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/electron-v7.1.11-darwin-x64 - - # --target为electron的版本 - # --arch为系统架构 ia32/x64 - # --target_platform为Windows平台 win32/darwin - # --module_name为模块名 - # --module_path为生成模块路径，命令规范为：electron-electron版本-平台-架构 - ``` - -2. 项目的默认包管理 - - 本项目默认使用`yarn`进行包管理 - -3. 项目依赖包详解 - - * 项目中使用的开发依赖`react-app-rewired` `customize-cra` `babel-plugin-import` `less` `less-loader` `antd-dayjs-webpack-plugin` 全部基于 `antd`的[高级配置](https://ant.design/docs/react/use-with-create-react-app-cn)，没有使用`eject`对外暴露`webpack`来修改配置，使用了`react-app-rewired`的解决方案。`react-app-rewired`依赖`customize-cra`，对于自定义的webpack设置可以参考 [api](https://github.com/arackaf/customize-cra/blob/master/api.md) 获取使用所有`customize-cra`提供的API。配置文件为根目录的`config-overrides.js` - - * 项目的`dev`指令详解：`package.json`中对应指令为`nodemon --watch main.js --exec concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none yarn start\"`，其中利用`nodemon`依赖监听`main.js`文件修改重载指令；`concurrently`并行`wait-on http://localhost:3000 && electron .`和`cross-env BROWSER=none yarn start`指令；`wait-on`依赖用于监听本地react服务的启动情况，当本地加载完成时执行`electron .`；`cross-env`利用了交叉环境设置环境变量`BROWSER=none`从而避免react自动启动浏览器预览 - - * 项目自带了`antd`和`bizCharts`，提供了样式库和图形可视化的能力，`bizCharts`是阿里基于antv g2的React商业化封装，具体文档可参考下面的文档引用 - -## 参考文档 - -* [在`create-react-app`中使用](https://ant.design/docs/react/use-with-create-react-app-cn) -* [react-app-rewired](https://github.com/timarney/react-app-rewired#alternatives) -* [customize-cra](https://github.com/arackaf/customize-cra) -* [bizCharts](https://bizcharts.net/index) -* [Ant Design of React](https://ant.design/docs/react/introduce-cn) -* [electron](https://www.electronjs.org/docs) +# electron-react-antd-antv-sqlite3-cli + +> 已废弃！！本仓库没有精力再维护，请转到[Eraac](https://github.com/HerbertHe/electron-react-antd-antv-cli)或[Eraatc](https://github.com/HerbertHe/electron-react-antd-antv-ts-cli)使用，本仓库作为集成sqlite3的参考将继续保留 + +一个集成electron、react、antd、antv、sqlite3的开发脚手架，便于快速搭建基于react开发的electron桌面应用，本项目只针对Windows环境 + +> 该项目是集成sqlite3数据库的`electron-react-antd-antv-cli`的衍生项目，在实际开发中遇到了自带打包数据库的问题和`sqlite3`包不能直接使用的问题，考虑到多平台编译的缘故，把项目抽离开。 + +## 环境依赖 + +* nodejs [未安装可参考](https://herberthe.gitee.io/2020/01/26/Nodejs%E5%AE%89%E8%A3%85%E8%8B%A5%E5%B9%B2%E9%97%AE%E9%A2%98%E9%81%BF%E5%9D%91/) +* node-gyp +* windows-build-tools + +> 关于electron的镜像，electron7.x之后需要设置单独的镜像，不然会安装报错；根据官方文档，中国地区镜像为: `https://cdn.npm.taobao.org/dist/electron/`，我参考过很多的教程仅发现一篇编译成功并且叙述详细，所遇到的问题和解决方式和这篇帖子几乎完全相同 [electron+sqlite3的一起使用](https://blog.csdn.net/zoepriselife316/article/details/89954383) + +在Windows的环境下命令为: + +```shell +# 关于electron +npm config set ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" + +# 验证设置 +npm config ls + +# 成功配置输出 +# ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" + + +# 关于node-gyp和windows-build-tools +# 全局安装node-gyp +npm install node-gyp -g + +# 全局安装windows-build-tools +npm install windows-build-tools -g + +# 安装windows-build-tools的时候会自动检查安装python2.x这个依赖，之前安装node-sass的时候我碰到过这个问题，怕麻烦的话提前装个vs2015，其实只是需要一个visual C++ Build Tools而已。。。 +``` + +> 上面`visual C++ Build Tools`可以参考这个同学的文章 [Microsoft Visual C++ Build Tools下载/解决Visual C++ 14.0 is required问题](https://blog.csdn.net/antizheng/article/details/88633912)，点击这直接下载安装 [Visual C++ Build Tools 2015](http://go.microsoft.com/fwlink/?LinkId=691126)，这个都是Windows环境下的问题，`electron-rebuild`这个依赖在Windows10下编译`sqlite3`是报错的 + +## 更新记录 + +> 请参考GitHub: [HerbertHe/electron-react-antd-antv-cli](https://github.com/HerbertHe/electron-react-antd-antv-cli), Gitee: [HerbertHe/electron-react-antd-antv-cli](https://gitee.com/HerbertHe/electron-react-antd-antv-cli) + +## 快速使用 + +* `clone` 仓库 + +```shell +# github +git clone https://github.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git + +# gitee +git clone https://gitee.com/HerbertHe/electron-react-antd-antv-sqlite3-cli.git +``` + +> 已提供开发工具`Edever`做更便捷的下载管理，请参考文档使用Gitee: [HerbertHe/Edever](https://gitee.com/HerbertHe/Edever), GitHub: [HerbertHe/Edever](https://github.com/HerbertHe/Edever) + +* 进入仓库 + +* 下载依赖，会花费一些时间请耐心等待 + +```shell +yarn +``` + +* 命令行打开进入sqlite3所在的目录 `node_modules/sqlite3` + +```shell +cd node_modules/sqlite3 +``` + +* 编译sqlite3（只针对Windows系统） + +> 根据你的实际需求更改下述的命令，我在node的脚本命令里已经提供了针对于本项目依赖的命令请参考执行，命令解析请参考下面的参考项目 + +```shell +# 32位操作系统 +yarn run sqlite3:ia32 + +# 64位操作系统 +yarn run sqlite3:x64 +``` + +* 验证安装 + +```shell +yarn run ele:dev +``` + +## 关于项目 + +查看项目从`package.json`开始，项目的`README.md`可能更新不及时 + +1. 已提供的指令 + + ```shell + "react:dev": "启动react的预览", + "react:build": "构建react的产物", + "react:test": "react测试", + "react:eject": "react-scripts eject", + "ele:dev": "启动electron开发预览", + "sqlite3:ia32": "编译sqlite3为32位环境", + "sqlite3:x64": "编译sqlite3为64位环境" + # 下面详述包及自定义配置，目前只针对electron的开发做了脚本 + ``` + + ```shell + # 项目启动后在任何时间都可以在命令行输入rs回车使用nodemon强制项目更新 + rs + # Ctrl + c后输入y即可退出命令行启动预览环境 + ``` + + 具体命令解析: + + ```shell + node-gyp rebuild --target=7.1.11 --arch=x64 --target_platform=darwin --dist-url=https://atom.io/download/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/electron-v7.1.11-darwin-x64 + + # --target为electron的版本 + # --arch为系统架构 ia32/x64 + # --target_platform为Windows平台 win32/darwin + # --module_name为模块名 + # --module_path为生成模块路径，命令规范为：electron-electron版本-平台-架构 + ``` + +2. 项目的默认包管理 + + 本项目默认使用`yarn`进行包管理 + +3. 项目依赖包详解 + + * 项目中使用的开发依赖`react-app-rewired` `customize-cra` `babel-plugin-import` `less` `less-loader` `antd-dayjs-webpack-plugin` 全部基于 `antd`的[高级配置](https://ant.design/docs/react/use-with-create-react-app-cn)，没有使用`eject`对外暴露`webpack`来修改配置，使用了`react-app-rewired`的解决方案。`react-app-rewired`依赖`customize-cra`，对于自定义的webpack设置可以参考 [api](https://github.com/arackaf/customize-cra/blob/master/api.md) 获取使用所有`customize-cra`提供的API。配置文件为根目录的`config-overrides.js` + + * 项目的`dev`指令详解：`package.json`中对应指令为`nodemon --watch main.js --exec concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none yarn start\"`，其中利用`nodemon`依赖监听`main.js`文件修改重载指令；`concurrently`并行`wait-on http://localhost:3000 && electron .`和`cross-env BROWSER=none yarn start`指令；`wait-on`依赖用于监听本地react服务的启动情况，当本地加载完成时执行`electron .`；`cross-env`利用了交叉环境设置环境变量`BROWSER=none`从而避免react自动启动浏览器预览 + + * 项目自带了`antd`和`bizCharts`，提供了样式库和图形可视化的能力，`bizCharts`是阿里基于antv g2的React商业化封装，具体文档可参考下面的文档引用 + +## 参考文档 + +* [在`create-react-app`中使用](https://ant.design/docs/react/use-with-create-react-app-cn) +* [react-app-rewired](https://github.com/timarney/react-app-rewired#alternatives) +* [customize-cra](https://github.com/arackaf/customize-cra) +* [bizCharts](https://bizcharts.net/index) +* [Ant Design of React](https://ant.design/docs/react/introduce-cn) +* [electron](https://www.electronjs.org/docs) diff --git a/package.json b/package.json index 0bca315af5e34a6477fb93d76e69be0f9fbc706d..cef3bfec08f805b20f44b63615e02ffd86bf843c 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "concurrently": "^5.1.0", "cross-env": "^7.0.0", "devtron": "^1.4.0", - "electron": "^8.1.1", + "electron": "8.1.1", "electron-is-dev": "^1.1.0", "nodemon": "^2.0.2", "wait-on": "^4.0.0" diff --git a/src/App.css b/src/App.css index 74b5e053450a48a6bdb4d71aad648e7af821975c..dbb724ba1d2a5ca534f75beb78073e2c33f92a3e 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,5 @@ +@import '~antd/dist/antd.css'; + .App { text-align: center; } @@ -9,17 +11,23 @@ @media (prefers-reduced-motion: no-preference) { .App-logo { - animation: App-logo-spin infinite 20s linear; + -webkit-animation: App-logo-spin infinite 20s linear; + animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; + display: -webkit-box; display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + flex-direction: column; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; font-size: calc(10px + 2vmin); color: white; } @@ -28,11 +36,24 @@ color: #61dafb; } +@-webkit-keyframes App-logo-spin { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + to { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + @keyframes App-logo-spin { from { - transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } to { - transform: rotate(360deg); + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } }