Electron 打印客户端项目教程

Electron 打印客户端项目教程

electron-print-demoelectron 打印客户端项目地址:https://gitcode.com/gh_mirrors/el/electron-print-demo

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

electron-print-demo/
├── src/
│   ├── main/
│   │   ├── index.js
│   ├── renderer/
│   │   ├── App.vue
│   │   ├── main.js
├── .eslintrc.js
├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── vue.config.js

目录结构说明

• src/: 项目源代码目录。
  • main/: 主进程代码目录，包含 index.js 文件，负责 Electron 的主进程逻辑。
  • renderer/: 渲染进程代码目录，包含 App.vue 和 main.js 文件，负责 Vue 应用的渲染逻辑。
• .eslintrc.js: ESLint 配置文件，用于代码风格检查。
• .gitignore: Git 忽略文件配置。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件，用于 JavaScript 转译。
• package-lock.json: 锁定依赖版本。
• package.json: 项目配置文件，包含依赖、脚本等信息。
• vue.config.js: Vue 项目配置文件。

2. 项目的启动文件介绍

主进程启动文件

src/main/index.js

该文件是 Electron 的主进程启动文件，负责创建窗口和管理应用的生命周期。

const { app, BrowserWindow } = require('electron');
const path = require('path');

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

  mainWindow.loadFile('index.html');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

渲染进程启动文件

src/renderer/main.js

该文件是 Vue 应用的入口文件，负责初始化 Vue 实例并挂载到 DOM 上。

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

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

3. 项目的配置文件介绍

package.json

该文件包含了项目的元数据和依赖信息，以及脚本命令。

{
  "name": "electron-print-demo",
  "version": "1.0.0",
  "description": "Electron 打印客户端",
  "main": "src/main/index.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^12.0.0",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "eslint": "^7.0.0",
    "babel-eslint": "^10.0.0"
  }
}

vue.config.js

该文件用于配置 Vue 项目的构建选项。

module.exports = {
  devServer: {
    port: 8080,
  },
};

.eslintrc.js

该文件用于配置 ESLint 代码检查规则。

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
  ],
  parserOptions: {
    parser: 'babel-eslint',
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' :

electron-print-demoelectron 打印客户端项目地址:https://gitcode.com/gh_mirrors/el/electron-print-demo