Editaro 项目教程

1. 项目的目录结构及介绍

editaro/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── main/
│   │   ├── App.vue
│   │   └── ...
│   ├── renderer/
│   │   ├── components/
│   │   │   └── ...
│   │   ├── App.vue
│   │   └── ...
│   └── ...
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── LICENSE
├── README.md
├── babel.config.js
├── electron-builder.json
├── package.json
├── postcss.config.js
├── tsconfig.json
└── yarn.lock

目录结构介绍

• public/: 包含项目的公共资源，如 index.html。
• src/: 包含项目的主要源代码。
  • main/: 包含主进程的代码。
  • renderer/: 包含渲染进程的代码，如组件和页面。
• .browserslistrc: 配置浏览器兼容性。
• .eslintrc.js: 配置 ESLint 代码检查规则。
• .gitignore: 配置 Git 忽略的文件和目录。
• LICENSE: 项目的开源许可证。
• README.md: 项目的说明文档。
• babel.config.js: 配置 Babel 转译规则。
• electron-builder.json: 配置 Electron 构建选项。
• package.json: 项目的依赖和脚本配置。
• postcss.config.js: 配置 PostCSS 处理规则。
• tsconfig.json: 配置 TypeScript 编译选项。
• yarn.lock: 锁定依赖版本。

2. 项目的启动文件介绍

主进程启动文件

主进程的启动文件通常位于 src/main/index.js 或 src/main/main.js。这个文件负责启动 Electron 应用的主进程，并创建窗口。

渲染进程启动文件

渲染进程的启动文件通常位于 src/renderer/main.js 或 src/renderer/index.js。这个文件负责启动渲染进程，并加载 Vue 应用。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键字段：

{
  "name": "editaro",
  "version": "1.7.1",
  "main": "src/main/index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "electron": "^11.2.3"
  },
  "devDependencies": {
    "electron-builder": "^22.9.1"
  }
}

electron-builder.json

electron-builder.json 文件用于配置 Electron 应用的构建选项。以下是一个示例：

{
  "appId": "com.example.editaro",
  "productName": "Editaro",
  "directories": {
    "output": "build"
  },
  "files": [
    "dist/**/*",
    "src/main/**/*",
    "src/renderer/**/*"
  ],
  "mac": {
    "category": "public.app-category.productivity"
  }
}

babel.config.js

babel.config.js 文件用于配置 Babel 转译规则。以下是一个示例：

module.exports = {
  presets: [
    '@babel/preset-env',
    '@babel/preset-typescript'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ]
};

tsconfig.json

tsconfig.json 文件用于配置 TypeScript 编译选项。以下是一个示例：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,