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 应用的渲染逻辑。
- main/: 主进程代码目录,包含
- .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