Electron-Vue3-Template 使用教程

Electron-Vue3-Template 使用教程

electron-vue3-template项目地址:https://gitcode.com/gh_mirrors/el/electron-vue3-template

1. 项目目录结构及介绍

Electron-Vue3-Template 提供了以下主要的目录结构：

├── docs                    # 文档目录
├── env                      # 环境变量配置
├── globel                   # 全局变量或第三方库存储
├── plugins                  # Vite 插件
├── public                   # 静态资源文件夹
├── src                       # 主要源代码目录
│   ├── assets               # 图片和其他静态资产
│   ├── components           # 公共组件
│   │   └── demo             # 示例组件
│   ├── main.ts              # 应用入口文件
│   ├── render.ts            # 渲染进程主文件
│   ├── store                 # Vuex状态管理
│   ├── styles                # 样式文件
│   ├── views                 # 页面视图
│   └── ...                   # 其他相关文件
├── types                    # TypeScript 类型定义
├── .gitignore                # Git 忽略文件列表
├── electron-builder.json5    # Electron 构建配置文件
├── index.html                # 主页模板
├── package.json              # 项目依赖和脚本配置
├── vite.config.ts            # Vite 配置文件
└── tsconfig.json             # TypeScript 编译配置
└── tsconfig.node.json        # Node.js 环境的TypeScript编译配置

简要说明：

• src/main.ts: 用于初始化Electron应用的主要逻辑。
• src/render.ts: 渲染进程的主文件，处理前端逻辑。
• src/assets: 存放应用中的图片和其他静态资源。
• src/components: 包含Vue组件，子目录demo存放示例组件。
• src/store: 使用Pinia进行状态管理的目录。
• vite.config.ts: Vite构建工具的自定义配置。

2. 项目的启动文件介绍

src/main.ts

这是Electron应用程序的核心，它初始化Electron实例并负责加载渲染进程（即前端应用）。在这个文件中，你会看到如何创建Electron应用、窗口实例以及如何处理应用生命周期事件。

例如，main.ts中通常会有类似于这样的代码片段来创建一个浏览器窗口：

const mainWindow = new BrowserWindow({
  width: 800,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
  },
});

mainWindow.loadFile('index.html');

这里，new BrowserWindow 创建了一个新的窗口，然后mainWindow.loadFile('index.html')加载了应用的主页。

src/render.ts

这个文件是前端应用的入口点，通常包含Vue应用的实例化和路由设置。例如，它可能会导入Vue3和Vue Router，然后创建Vue实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

这将创建一个Vue3应用，并挂载到HTML中ID为'app'的元素上。

3. 项目的配置文件介绍

package.json

此文件包含了项目的基本信息，如项目名称、版本号以及npm脚本等。例如，启动应用的命令可能定义在scripts字段下：

{
  "name": "electron-vue3-template",
  "version": "1.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "start": "electron ."
  },
  // ...
}

这里，dev用于开发环境，build用于构建生产环境，start则用于启动Electron应用。

vite.config.ts

Vite的配置文件，可以自定义构建和开发时的设置，比如修改公共路径、添加插件、设置CSS预处理器等。例如：

export default defineConfig({
  base: './',
  build: {
    outDir: 'dist_electron',
    rollupOptions: {
      input: 'public/index.html',
    },
  },
});

.electron-builder.json5

这是Electron Builder的配置文件，用于定义构建时的选项，例如打包方式、目标平台、图标等。

{
  appId: 'com.example.electronvue3template',
 productName: 'ElectronVue3Template',
  files: [
    '**/*',
    '!node_modules/@types/**/*'
  ],
  mac: {
    category: 'public.app-category.developer-tools'
  }
}

请注意，这些仅是基本的配置结构，实际配置应根据项目需求来调整。在每个具体的项目中，这些文件可能会包含更多的定制选项和设置。

electron-vue3-template项目地址:https://gitcode.com/gh_mirrors/el/electron-vue3-template