自动驾驶——标注工具的开发笔记（legacy）

## 8.1 Electron-React-Boilerplate文件结构

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

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

6 写作方法

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，

链接如下：

"import 'bootstrap/dist/css/bootstrap.min.css';" doesn't work in the program · Issue #2519 · electron-react-boilerplate/electron-react-boilerplate · GitHub

7 调试笔记

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

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

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

7.2.1 Building编译时间可能比较长

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

但是使用的时候可能会出现“红色的ERROR”，at this time, VPN could be used to solve this problem.

这个编译的过程可能会比较久，大概需要半个小时左右，请耐心等待～

7.3 如何判断控件旁边的空白是否是margin的影响—— css--- margin: 0

如果在设置布局的时候，控件旁边总有空白很难判断是由什么原因引起的，可以设置像加百利老师一样，设置“margin: 0”，

这样可以帮助我们判断是否是margin带来的影响；

8 开发需求

5.1 阅览功能

• 需要保存上一次的阅读记录，也就是打开项目时，会自动跳转到上次的标注图片；