【electron+vue3+ts实战便笺exe】一、搭建框架配置 (2)

创建完之后的目录是这样的

electron-vue-notes ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── router │ │ └── index.ts │ ├── views │ │ ├── About.vue │ │ └── Home.vue │ ├── App.vue │ ├── main.ts │ └── shims-vue.d.ts ├── .browserslistrc ├── .eslintrc.js ├── babel.config.js ├── package.json ├── README.md ├── tsconfig.json └── yarn.lock 安装electron的依赖 # yarn yarn add vue-cli-plugin-electron-builder electron # npm 或 cnpm npm i vue-cli-plugin-electron-builder electron

安装完之后完善一些配置，比如别名、eslint、prettier等等基础配置，还有一些颜色、icons等等具体可以看下面

项目的一些基础配置 eslint

使用eslint主要是规范代码风格，不推荐tslint是因为tslint已经不更新了，tslint也推荐使用eslint
安装eslint

npm i eslint -g

进入项目之后初始化eslint

eslint --init # 后续配置 ? How would you like to use ESLint? To check syntax and find problems ? What type of modules does your project use? JavaScript modules (import/export) ? Which framework does your project use? Vue.js ? Does your project use TypeScript? Yes ? Where does your code run? Browser, Node ? What format do you want your config file to be in? JavaScript The config that you've selected requires the following dependencies: eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest ? Would you like to install them now with npm? (Y/n) y

修改eslint配置，·.eslintrc.js，规则rules可以根据自己的喜欢配置
https://eslint.org/docs/user-guide/configuring

module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-essential', 'eslint:recommended', 'plugin:prettier/recommended', 'plugin:@typescript-eslint/eslint-recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint' ], parserOptions: { ecmaVersion: 2020 }, rules: { quotes: [1, 'single'], semi: 1, '@typescript-eslint/camelcase': 0, '@typescript-eslint/no-explicit-any': 0, 'no-irregular-whitespace': 2, 'no-case-declarations': 0, 'no-undef': 0, 'eol-last': 1, 'block-scoped-var': 2, 'comma-dangle': [2, 'never'], 'no-dupe-keys': 2, 'no-empty': 1, 'no-extra-semi': 2, 'no-multiple-empty-lines': [1, { max: 1, maxEOF: 1 }], 'no-trailing-spaces': 1, 'semi-spacing': [2, { before: false, after: true }], 'no-unreachable': 1, 'space-infix-ops': 1, 'spaced-comment': 1, 'no-var': 2, 'no-multi-spaces': 2, 'comma-spacing': 1 } }; prettier

在根目录增加.prettierrc.js配置，根据自己的喜好进行配置，单行多少个字符、单引号、分号、逗号结尾等等

module.exports = { printWidth: 120, singleQuote: true, semi: true, trailingComma: 'none' }; tsconfig.json

如果这里没有配置识别@/路径的话，在项目中使用会报错

"paths": { "@/*": [ "src/*" ] } package.json "author": "heiyehk", "description": "I便笺个人开发者heiyehk独立开发，在Windows中更方便的记录文字。", "main": "background.js", "scripts": { "lint": "vue-cli-service lint", "electron:build": "vue-cli-service electron:build", "electron:serve": "vue-cli-service electron:serve" } 配置入口文件background.ts

因为需要做一些打开和关闭的动效，因此我们需要配置electron为frame无边框和透明transparent的属性

/* eslint-disable @typescript-eslint/no-empty-function */ 'use strict'; import { app, protocol, BrowserWindow, globalShortcut } from 'electron'; import { createProtocol // installVueDevtools } from 'vue-cli-plugin-electron-builder/lib'; const isDevelopment = process.env.NODE_ENV !== 'production'; let win: BrowserWindow | null; protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: true } } ]); function createWindow() { win = new BrowserWindow({ frame: false, // 无边框 hasShadow: false, transparent: true, // 透明 width: 950, height: 600, webPreferences: { enableRemoteModule: true, nodeIntegration: true } }); if (process.env.WEBPACK_DEV_SERVER_URL) { win.loadURL(process.env.WEBPACK_DEV_SERVER_URL); if (!process.env.IS_TEST) win.webContents.openDevTools(); } else { createProtocol('app'); win.loadURL('http://localhost:8080'); } win.on('closed', () => { win = null; }); } app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { if (win === null) { createWindow(); } }); app.on('ready', async () => { // 这里注释掉是因为会安装tools插件，需要屏蔽掉，有能力的话可以打开注释 // if (isDevelopment && !process.env.IS_TEST) { // try { // await installVueDevtools(); // } catch (e) { // console.error('Vue Devtools failed to install:', e.toString()); // } // } createWindow(); }); if (isDevelopment) { if (process.platform === 'win32') { process.on('message', data => { if (data === 'graceful-exit') { app.quit(); } }); } else { process.on('SIGTERM', () => { app.quit(); }); } } 启动 yarn electron:serve