1 前言

我们需要自己开发一款标注软件～

2 框架选择

应用框架：Electron+React

UI组件库：Bootstrap (React Bootstrap)

3 项目需求

3.1 自动更新

在标注软件中，加入自动更新的功能；

3 项目初始化配置

3.1 复制electron-react-boilerplate模板

进入electron-react-boilerplate的Github网址进行复制：

https://github.com/electron-react-boilerplate/electron-react-boilerplate#install

关于electron-react-boilerplate的结构可以参考我的博文《electron-react-boilerplate的学习笔记》；

3.1.1 使用“yarn”命令进行项目依赖包的安装

在electron-react-boilerplate的安装步骤中，需要使用“yarn”命令进行项目依赖包的安装，

所以我们首先需要安装yarn包管理器，使用如下命令：

npm install -g yarn

Note：遇到权限问题，可以百度搜索一下解决方案

Note：如果遇到网络问题，this might be due to the firewall;

我们可以使用换源的方法来解决这个问题，

可以参考这个千锋教育的老师提供的讲解：2020Electron-HTML+CSS+JS构建跨平台桌面应用程序【千锋Web前端】

3.2 安装 React Bootstrap

使用命令：

yarn add react-bootstrap bootstrap

4 electron-react-boilerplate的文件结构

4.1 文件类型

electron-react-boilerplate中有很多种文件类型

4.1.1 .tsx——使用TypeScript来书写JSX的代码

我们在写作控件时，使用的文件类型是.tsx类型，这里的.tsx就是用TypeScript来书写JSX的代码；

4.2 文件的组成结构

4.2.1 App.js——项目的入口文件

承担着MVC模式中controller的角色；

4.2.2 app.html——应用的布局文件

app.html是应用入口的布局文件，在这里可以修改应用窗口的标题；

4.2.2 app.global.css——项目整体的样式文件

app.global.css文件里面定义了软件的各种样式，比如：左侧栏letf-panel的大小和形状；

3 写作方法

3.1 基本UI控件使用react-bootstrap进行写作——React-style

UI控件我们尽量使用react-bootstrap中的控件，我觉得还是挺方便的；

写作模式采用React的模式，其具体的写作方法可以参考react-bootstrap的示例文档；

3.1.1 .css文件引入

在react-bootstrap官方文档中，.css文件的引入使用的是下面的方法：

由于我们使用的脚手架工具是electron-react-boilerplate，

而electron-react-boilerplate工具目前不支持这种引入方式，

而是需要在app.global.css文件中进行引入，引入的示例代码如下：

@import '~bootstrap/dist/css/bootstrap.min.css';

其哲学就是：将引用的.css文件都放到app.global.css文件中引入。

3.1.2 关于electron-react-boilerplate不支持import的引入方式

这一点我已经在electron-react-boilerplate的Github上提交了issue，

链接如下：

https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues/2519

4 调试程序

4.1 修改了HTML文件之后需要使用Reload进行重载

修改了.html文件之后，热重载功能无法生效，需要使用View中的Reload功能进行重载；

3.2 运行“yarn dev”命令进行调试

3.2.2 Building编译时间可能比较长