开源项目 Notable 使用教程
1. 项目的目录结构及介绍
Notable 项目的目录结构如下:
notable/
├── assets/
│ ├── icons/
│ ├── logo.png
├── build/
├── docs/
├── electron/
├── resources/
├── scripts/
├── src/
│ ├── common/
│ ├── components/
│ ├── editor/
│ ├── main/
│ ├── renderer/
│ ├── store/
│ ├── styles/
│ ├── utils/
├── static/
├── test/
├── .babelrc
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── app-update.yml
├── index.js
├── package.json
├── README.md
├── tsconfig.json
├── tslint.json
目录结构介绍
assets/
: 存放项目资源文件,如图标和logo。build/
: 存放构建生成的文件。docs/
: 存放项目文档。electron/
: 与 Electron 相关的文件。resources/
: 存放项目资源。scripts/
: 存放脚本文件。src/
: 项目源代码目录。common/
: 公共模块。components/
: 组件模块。editor/
: 编辑器模块。main/
: 主进程模块。renderer/
: 渲染进程模块。store/
: 状态管理模块。styles/
: 样式文件。utils/
: 工具模块。
static/
: 静态文件。test/
: 测试文件。- 配置文件和项目描述文件。
2. 项目的启动文件介绍
Notable 项目的启动文件是 index.js
。这个文件是 Electron 应用的入口点,负责启动主进程。
index.js 文件内容概述
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
mainWindow.loadURL(
process.env.ELECTRON_START_URL ||
url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true,
})
);
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
启动文件功能
- 创建主窗口。
- 加载应用的 HTML 文件。
- 处理窗口的生命周期事件。
3. 项目的配置文件介绍
Notable 项目的主要配置文件是 package.json
。这个文件包含了项目的元数据和依赖项。
package.json 文件内容概述
{
"name": "notable",
"version": "1.0.0",
"description": "The Markdown-based note-taking app that doesn't suck.",
"main": "index.js",
"scripts": {
"start": "electron .",
"build": "electron-builder"
},
"dependencies": {
"electron": "^12.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"electron-builder": "^22.10.5"
}
}
配置文件功能
- 定义项目名称、版本和描述。
- 指定主入口文件。