前端实战:electron+vue3+ts开发桌面端便签应用

相关文章推荐

干练的面包 · 在 Visual Basic 中使用 ...· 1 年前 ·

正直的刺猬 · 移动解析 HTTPDNS ...· 1 年前 ·

冷冷的奔马 · Decission Tree 决策树 ...· 2 年前 ·

愉快的奔马 · 【2022ESMO】AdvanTIG-205 ...· 2 年前 ·

干练的仙人球 · python 3.x - Error ...· 2 年前 ·

腾讯云

备案控制台

开发者社区

TVP

文章/答案/技术大牛

写文章

专栏首页趣谈前端前端实战:electron+vue3+ts开发桌面端便签应用

3 0

分享

electron-vue-notes
├── public
│   ├── css
│   ├── font
│   └── index.html
├── src
│   ├── assets
│   │   └── empty-content.svg
│   ├── components
│   │   ├── message
│   │   ├── rightClick
│   │   ├── editor.vue
│   │   ├── header.vue
│   │   ├── input.vue
│   │   ├── messageBox.vue
│   │   ├── switch.vue
│   │   └── tick.vue
│   ├── config
│   │   ├── browser.options.ts
│   │   ├── classNames.options.ts
│   │   ├── editorIcons.options.ts
│   │   ├── index.ts
│   │   └── shortcuts.keys.ts
│   ├── inotedb
│   │   └── index.ts
│   ├── less
│   │   └── index.less
│   ├── router
│   │   └── index.ts
│   ├── script
│   │   └── deleteBuild.js
│   ├── store
│   │   ├── exeConfig.state.ts
│   │   └── index.ts
│   ├── utils
│   │   ├── errorLog.ts
│   │   └── index.ts
│   ├── views
│   │   ├── editor.vue
│   │   ├── index.vue
│   │   ├── main.vue
│   │   └── setting.vue
│   ├── App.vue
│   ├── background.ts
│   ├── main.ts
│   └── shims-vue.d.ts
├── .browserslistrc
├── .eslintrc.js
├── .prettierrc.js
├── babel.config.js
├── inoteError.log
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── tsconfig.json
├── vue.config.js
└── yarn.lock

npm install -g @vue/cli

vue create electron-vue-notes
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features 
# 手动选择配置
# 后续所有配置
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n

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

# yarn
yarn add vue-cli-plugin-electron-builder electron
# npm 或 cnpm
npm i vue-cli-plugin-electron-builder electron

npm i eslint -g

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

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

module.exports = {
  printWidth: 120,
  singleQuote: true,
  semi: true,
  trailingComma: 'none'

"paths": {
  "@/*": [
    "src/*"

"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"

/* 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

config
├── browser.options.ts # 窗口的配置
├── classNames.options.ts # 样式名的配置，背景样式都通过这个文件渲染
├── editorIcons.options.ts # 编辑页面的一些editor图标
├── index.ts # 导出
└── shortcuts.keys.ts # 禁用的一些快捷键，electron是基于chromium浏览器，所以也存在一些浏览器快捷键比如F5

/**
 * 软件数据和配置
 * C:\Users\{用户名}\AppData\Roaming
 * C:\ProgramData\Intel\ShaderCache\i-notes{xx}
 * 快捷方式
 * C:\Users\{用户名}\AppData\Roaming\Microsoft\Windows\Recent
 * 电脑自动创建缓存
 * C:\Windows\Prefetch\I-NOTES.EXE{xx}
/** */
const globalEnv = process.env.NODE_ENV;
const devWid = globalEnv === 'development' ? 950 : 0;
const devHei = globalEnv === 'development' ? 600 : 0;
// 底部icon: 40*40
const editorWindowOptions = {
  width: devWid || 290,
  height: devHei || 350,
  minWidth: 250
 * BrowserWindow的配置项
 * @param type 单独给编辑窗口的配置
const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowConstructorOptions => {
  const commonOptions = {
    minHeight: 48,
    frame: false,
    hasShadow: true,
    transparent: true,
    webPreferences: {
      enableRemoteModule: true,
      nodeIntegration: true
  if (!type) {
    return {
      width: devWid || 350,
      height: devHei || 600,
      minWidth: 320,
      ...commonOptions
  return {
    ...editorWindowOptions,
    ...commonOptions
 * 开发环境: http://localhost:8080
 * 正式环境: file://${__dirname}/index.html
const winURL = globalEnv === 'development' ? 'http://localhost:8080' : `file://${__dirname}/index.html`;
export { browserWindowOption, winURL };

import { createRouter, createWebHashHistory } from 'vue-router';
import { RouteRecordRaw } from 'vue-router';
import main from '../views/main.vue';
const routes: Array<RouteRecordRaw> = [
    path: '/',
    name: 'main',
    component: main,
    children: [
        path: '/',
        name: 'index',
        component: () => import('../views/index.vue'),
        meta: {
          title: 'I便笺'
        path: '/editor',
        name: 'editor',
        component: () => import('../views/editor.vue'),
        meta: {
          title: ''
        path: '/setting',
        name: 'setting',
        component: () => import('../views/setting.vue'),
        meta: {
          title: '设置'
const router = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes
export default router;

// bad
<transition name="fade">
  <keep-alive>
    <router-view />
  </keep-alive>
</transition>

<router-view v-slot="{ Component }">
  <transition name="main-fade">
    <div class="transition" :key="routeName">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
  </transition>
</router-view>

<script lang="ts">
import { defineComponent, ref, onBeforeUpdate } from 'vue';
import { useRoute } from 'vue-router';
import Header from '@/components/header.vue';
export default defineComponent({
  components: {
    Header
  setup() {
    const routeName = ref(useRoute().name);
    onBeforeUpdate(() => {
      routeName.value = useRoute().name;
    return {
      routeName
</script>

 <style lang="less" scoped>
.main-fade-enter,
.main-fade-leave-to {
  display: none;
  opacity: 0;
  animation: main-fade 0.4s reverse;
.main-fade-enter-active,
.main-fade-leave-active {
  opacity: 0;
  animation: main-fade 0.4s;
@keyframes main-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
    opacity: 1;
    transform: scale(1);
</style>

import { onBeforeRouteUpdate, useRoute } from 'vue-router';
onBeforeRouteUpdate((to, from, next) => {
  title.value = to.meta.title;
  currentRouteName.value = to.name;
  next();

// 获取首页的内边距
const computedPaddingLeft = computed(() => {
  return currentRouteName.value === 'index' ? 'padding-left: 40px;' : '';

setup(props, content) {}

export default defineComponent({
  props: {
    test: String
  emits: ['option-click', 'on-close'],
  // 如果只用emit的话可以使用es6解构
  // 如：setup(props, { emit })
  setup(props, content) {
    console.log(props.test, content.emit('option-click'));

import { browserWindowOption } from '@/config';
import { createBrowserWindow, transitCloseWindow } from '@/utils';
const editorWinOptions = browserWindowOption('editor');
// 打开新窗口
const openNewWindow = () => {
  createBrowserWindow(editorWinOptions, '/editor');

import { remote } from 'electron';
// 获取窗口固定状态
let isAlwaysOnTop = ref(false);
const currentWindow = remote.getCurrentWindow();
isAlwaysOnTop.value = currentWindow.isAlwaysOnTop();
// 固定前面
const drawingPin = () => {
  if (isAlwaysOnTop.value) {
    currentWindow.setAlwaysOnTop(false);
    isAlwaysOnTop.value = false;
  } else {
    currentWindow.setAlwaysOnTop(true);
    isAlwaysOnTop.value = true;

// 过渡关闭窗口
export const transitCloseWindow = (): void => {
  document.querySelector('#app')?.classList.remove('app-show');
  document.querySelector('#app')?.classList.add('app-hide');
  remote.getCurrentWindow().close();

yarn add nedb @types/nedb

/**
 * 储存数据库的
interface DBNotes {
  className: string; // 样式名
  content: string; // 内容
  readonly createdAt: Date; // 创建时间，这个时间是nedb自动生成的
  readonly uid: string; // uid，utils中的方法生成
  readonly updatedAt: Date; // update，自动创建的
  readonly _id: string; // 自动创建的

type QueryDB<T> = {
  [K in keyof T]?: T[K];

import Datastore from 'nedb';
import path from 'path';
import { remote } from 'electron';
 * @see https://www.npmjs.com/package/nedb
class INoteDB<G = any> {
   * 默认储存位置
   * C:\Users\{Windows User Name}\AppData\Roaming\i-notes
  // dbPath = path.join(remote.app.getPath('userData'), 'db/inote.db');
  // dbPath = './db/inote.db';
  dbPath = this.path;
  _db: Datastore<Datastore.DataStoreOptions> = this.backDatastore;
  get path() {
    if (process.env.NODE_ENV === 'development') {
      return path.join(__dirname, 'db/inote.db');
    return path.join(remote.app.getPath('userData'), 'db/inote.db');
  get backDatastore() {
    return new Datastore({
       * autoload
       * default: false
       * 当数据存储被创建时，数据将自动从文件中加载到内存，不必去调用loadDatabase
       * 注意所有命令操作只有在数据加载完成后才会被执行
      autoload: true,
      filename: this.dbPath,
      timestampData: true
  refreshDB() {
    this._db = this.backDatastore;
  insert<T extends G>(doc: T) {
    return new Promise((resolve: (value: T) => void) => {
      this._db.insert(doc, (error: Error | null, document: T) => {
        if (!error) resolve(document);
   * db.find(query)
   * @param {Query<T>} query：object类型，查询条件，可以使用空对象{}。
   * 支持使用比较运算符($lt, $lte, $gt, $gte, $in, $nin, $ne)
   * 逻辑运算符($or, $and, $not, $where)
   * 正则表达式进行查询。
  find(query: QueryDB<DBNotes>) {
    return new Promise((resolve: (value: DBNotes[]) => void) => {
      this._db.find(query, (error: Error | null, document: DBNotes[]) => {
        if (!error) resolve(document as DBNotes[]);
   * db.findOne(query)
   * @param query
  findOne(query: QueryDB<DBNotes>) {
    return new Promise((resolve: (value: DBNotes) => void) => {
      this._db.findOne(query, (error: Error | null, document) => {
        if (!error) resolve(document as DBNotes);
   * db.remove(query, options)
   * @param {Record<keyof DBNotes, any>} query
   * @param {Nedb.RemoveOptions} options
   * @return {BackPromise<number>}
  remove(query: QueryDB<DBNotes>, options?: Nedb.RemoveOptions) {
    return new Promise((resolve: (value: number) => void) => {
      if (options) {
        this._db.remove(query, options, (error: Error | null, n: number) => {
          if (!error) resolve(n);
      } else {
        this._db.remove(query, (error: Error | null, n: number) => {
          if (!error) resolve(n);
  update<T extends G>(query: T, updateQuery: T, options: Nedb.UpdateOptions = {}) {
    return new Promise((resolve: (value: T) => void) => {
      this._db.update(
        query,
        updateQuery,
        options,
        (error: Error | null, numberOfUpdated: number, affectedDocuments: T) => {
          if (!error) resolve(affectedDocuments);
export default new INoteDB();

import { reactive, watch } from 'vue';
const exeConfigLocal = localStorage.getItem('exeConfig');
export let exeConfig = reactive({
  syncDelay: 1000,
  switchStatus: {
     * 开启提示
    textTip: true
if (exeConfigLocal) {
  exeConfig = reactive(JSON.parse(exeConfigLocal));
} else {
  localStorage.setItem('exeConfig', JSON.stringify(exeConfig));
watch(exeConfig, e => {
  localStorage.setItem('exeConfig', JSON.stringify(e));

declare module 'vuex' {
  type StoreStateType = typeof store.state;
  export function useStore<S = StoreStateType>(): Store<S>;

import { createApp, h, App, VNode, RendererElement, RendererNode } from 'vue';
import './index.css';
type ClassName = string | string[];
interface MenuOptions {
  text: string;
   * 是否在使用后就关闭
  once?: boolean;
   * 单独的样式名
  className?: ClassName;
   * 图标样式名
  iconName?: ClassName;
  handler(): void;
type RenderVNode = VNode<
  RendererNode,
  RendererElement,
    [key: string]: any;
class CreateRightClick {
  rightClickEl?: App<Element>;
  rightClickElBox?: HTMLDivElement | null;
  constructor() {
    this.removeRightClickHandler();
   * 渲染dom
   * @param menu
  render(menu: MenuOptions[]): RenderVNode {
    return h(
      'ul',
        class: ['right-click-menu-list']
        ...menu.map(item => {
          return h(
            'li',
              class: item.className,
              // vue3.x中简化了render，直接onclick即可，onClick也可以
              onclick: () => {
                // 如果只是一次，那么点击之后直接关闭
                if (item.once) this.remove();
                return item.handler();
              // icon
              h('i', {
                class: item.iconName
              // text
                'span',
                  class: 'right-click-menu-text'
                item.text
   * 给右键的样式
   * @param event 鼠标事件
  setRightClickElStyle(event: MouseEvent, len: number): void {
    if (!this.rightClickElBox) return;
    this.rightClickElBox.style.height = `${len * 36}px`;
    const { clientX, clientY } = event;
    const { innerWidth, innerHeight } = window;
    const { clientWidth, clientHeight } = this.rightClickElBox;
    let cssText = `height: ${len * 36}px;opacity: 1;transition: all 0.2s;`;
    if (clientX + clientWidth < innerWidth) {
      cssText += `left: ${clientX + 2}px;`;
    } else {
      cssText += `left: ${clientX - clientWidth}px;`;
    if (clientY + clientHeight < innerHeight) {
      cssText += `top: ${clientY + 2}px;`;
    } else {
      cssText += `top: ${clientY - clientHeight}px;`;
    cssText += `height: ${len * 36}px`;
    this.rightClickElBox.style.cssText = cssText;
  remove(): void {
    if (this.rightClickElBox) {
      this.rightClickElBox.remove();
      this.rightClickElBox = null;
  removeRightClickHandler(): void {
    document.addEventListener('click', e => {
      if (this.rightClickElBox) {
        const currentEl = e.target as Node;
        if (!currentEl || !this.rightClickElBox.contains(currentEl)) {
          this.remove();
   * 鼠标右键悬浮
   * @param event
   * @param menu
  useRightClick = (event: MouseEvent, menu: MenuOptions[] = []): void => {
    this.remove();
    if (!this.rightClickElBox || !this.rightClickEl) {
      const createRender = this.render(menu);
      this.rightClickEl = createApp({
        setup() {
          return () => createRender;
    if (!this.rightClickElBox) {
      this.rightClickElBox = document.createElement('div');
      this.rightClickElBox.id = 'rightClick';
      document.body.appendChild(this.rightClickElBox);
      this.rightClickEl.mount('#rightClick');
    this.setRightClickElStyle(event, menu.length);
export default CreateRightClick;

// countFlag是一个状态来标记收到东西没
// index问editor打开了没有
ipcRenderer.send('你好')
// 这时候editor收到消息了
remote.ipcMain.on('你好', e => {
  // 收到消息后显示
  remote.getCurrentWindow().show();
  // 然后回index消息
  e.sender.send('你好我在的');
// index在等editor消息
ipcRenderer.on('你好我在的', () => {
  // 好的我收到了
  countFlag = true;
// 如果没收到消息，那标记一直是false，根据定时器来做相应操作

import CreateRightClick from '@/components/rightClick';
const rightClick = new CreateRightClick();
const contextMenu = (event: MouseEvent, uid: string) => {
  rightClick.useRightClick(event, [
      text: '打开笔记',
      once: true,
      iconName: ['iconfont', 'icon-newopen'],
      handler: () => {
        let countFlag = false;
        ipcRenderer.send(`${uid}_toOpen`);
        ipcRenderer.on(`get_${uid}_toOpen`, () => {
          countFlag = true;
        setTimeout(() => {
          if (!countFlag) openEditorWindow(uid);
        }, 100);
      text: '删除笔记',
      once: true,
      iconName: ['iconfont', 'icon-delete'],
      handler: () => {
        deleteCurrentUid.value = uid;
        if (exeConfig.switchStatus.deleteTip) {
          deleteMessageShow.value = true;
        } else {
          // 根据弹窗组件进行判断
          onConfirm();

<Editor :content="editContent" :className="currentBgClassName" @on-input="changeEditContent" />

const routeUid = useRoute().query.uid as string;
if (routeUid) {
  // 查询
  uid.value = routeUid;
  getCurUidItem(routeUid);
} else {
  // 生成uid并把uid放到地址栏
  const uuidString = uuid();
  uid.value = uuidString;
  useRouter().push({
    query: {
      uid: uuidString
  // 插入数据库并向列表页通信

import { defineComponent, onMounted, ref, Ref, watch } from 'vue';
// setup中创建一个和<div ref="editor">同名的变量，就可以直接拿到dom节点，一定要return！！！
let editor: Ref<HTMLDivElement | null> = ref(null);
onMounted(() => {
  focus();
const focus = () => {
  const range = document.createRange();
  range.selectNodeContents(editor.value as HTMLDivElement);
  range.collapse(false);
  const selecton = window.getSelection() as Selection;
  selecton.removeAllRanges();
  selecton.addRange(range);
return {
  editor,

export default defineComponent({
  props: {
    content: String,
    className: String
  emits: ['on-input'],
  setup(props, { emit }) {
    let editor: Ref<HTMLDivElement | null> = ref(null);
    const bottomIcons = editorIcons;
    const editorContent: Ref<string | undefined> = ref('');
    // 监听从父组件传来的内容，因为是从数据库查询所以会有一定的延迟
    watch(props, nv => {
      if (!editorContent.value) {
        // 只赋值一次
        editorContent.value = nv.content;

const changeEditorContent = debounce((e: InputEvent) => {
  const editorHtml = (e.target as Element).innerHTML;
  emit('on-input', editorHtml);
}, exeConfig.syncDelay);

const paste = (e: ClipboardEvent) => {
  const pasteText = e.clipboardData?.getData('text/plain');
  console.log(pasteText);
  document.execCommand('insertText', false, pasteText);

<div ref="editor"></div>

setup(props, { emit }) {
  let editor = ref(null);
  return { editor }

<div ref="test"></div>

import { defineComponent, getCurrentInstance, onMounted } from 'vue';
setup(props, { emit }) {
  onMounted(() => {
    console.log(getCurrentInstance().refs);
    // 得到的是test dom以及其他定义的节点
  return {
    test: ''

<div ref="dom"></div>

const dom = ref(null);
return {

<div v-tip="switch"></div>

export default defineComponent({
  components: {
    Tick,
    Input,
    Switch
  directives: {
    tip(el, { value }) {
      const { height } = el.dataset;
      // 储存最初的高度
      if (!height && height !== '0') {
        el.dataset.height = el.clientHeight;
      const clientHeight = height || el.clientHeight;
      let cssText = 'transition: all 0.4s;';
      if (value) {
        cssText += `height: ${clientHeight}px;opacity: 1;`;
      } else {
        cssText += 'height: 0;opacity: 0;overflow: hidden;';
      el.style.cssText = cssText;

<a @click="copyEmail">复制</a>
<input class="hide-input" ref="mailInput" type="text" value="heiyehk@foxmail.com" />

const mailInput: Ref<HTMLInputElement | null> = ref(null);
const copyEmail = () => {
  if (copyStatus.value) return;
  copyStatus.value = true;
  mailInput.value?.select();
  document.execCommand('copy');
return {
  copyEmail

import { remote } from 'electron';
remote.shell.showItemInFolder('D:');

import { remote } from 'electron';
remote.shell.openExternal('www.github.com');

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import outputErrorLog from '@/utils/errorLog';
const app = createApp(App);
// 错误收集方法
app.config.errorHandler = outputErrorLog;
app.use(router).mount('#app');

export const errorLogPath = path.join(remote.app.getPath('exe'), '../inoteError.log');

fs.writeFileSync(errorLogPath, JSON.stringify(errorLog) + '\n', { flag: 'a' });

import { ComponentPublicInstance } from 'vue';
import dayjs from 'dayjs';
import fs from 'fs-extra';
import os from 'os';
import { remote } from 'electron';
import path from 'path';
import useMessage from '@/components/message';
function getShortStack(stack?: string): string {
  const splitStack = stack?.split('\n    ');
  if (!splitStack) return '';
  const newStack: string[] = [];
  for (const line of splitStack) {
    // 其他信息
    if (line.includes('bundler')) continue;
    // 只保留错误文件信息
    if (line.includes('?!.')) {
      newStack.push(line.replace(/webpack-internal:\/\/\/\.\/node_modules\/.+\?!/, ''));
    } else {
      newStack.push(line);
  // 转换string
  return newStack.join('\n    ');
export const errorLogPath = path.join(remote.app.getPath('exe'), '../inoteError.log');
export default function(error: unknown, vm: ComponentPublicInstance | null, info: string): void {
  const { message, stack } = error as Error;
  const { electron, chrome, node, v8 } = process.versions;
  const { outerWidth, outerHeight, innerWidth, innerHeight } = window;
  const { width, height } = window.screen;
  // 报错信息
  const errorInfo = {
    errorInfo: info,
    errorMessage: message,
    errorStack: getShortStack(stack)
  // electron
  const electronInfo = { electron, chrome, node, v8 };
  // 浏览器窗口信息
  const browserInfo = { outerWidth, outerHeight, innerWidth, innerHeight };
  const errorLog = {
    versions: remote.app.getVersion(),
    date: dayjs().format('YYYY-MM-DD HH:mm'),
    error: errorInfo,
    electron: electronInfo,
    window: {
      type: os.type(),
      platform: os.platform()
    browser: browserInfo,
    screen: { width, height }
  useMessage('程序出现异常', 'error');
  if (process.env.NODE_ENV === 'production') {
    fs.writeFileSync(errorLogPath, JSON.stringify(errorLog) + '\n', { flag: 'a' });
  } else {
    console.log(error);
    console.log(errorInfo.errorStack);

const appInfo = process.versions;

const rm = require('rimraf');
const path = require('path');
const pluginOptions = require('../../vue.config').pluginOptions;
let directories = pluginOptions.electronBuilder.builderOptions.directories;
let buildPath = '';
if (directories && directories.output) {
  buildPath = directories.output;
// 删除作用只用于删除打包前的buildPath || dist_electron
// dist_electron是默认打包文件夹
rm(path.join(__dirname, `../../${buildPath || 'dist_electron'}`), () => {});

徐小夕

前端实战:electron+vue3+ts开发桌面端便签应用

前端实战:electron+vue3+ts开发桌面端便签应用

技术栈

开发思路

使用脚手架搭建vue3环境

安装electron的依赖

项目的一些基础配置

eslint

prettier

tsconfig.json

package.json

配置入口文件 background.ts

启动

常规配置

config

browser.options

router

main.vue

header.vue

onBeforeRouteUpdate

computed

emit子传父和props父传子

electron打开窗口

electron图钉固定屏幕前面

electron关闭窗口

noteDb数据库

使用 ref 和 reactive 代替vuex，并用 watch 监听

创建 exeConfig.state.ts

vuex番外

index.vue

开发一个vue3右键弹窗插件

右键弹窗插件配合electron打开、删除便笺笔记

ipcRenderer 和 ipcMain 通信

右键弹窗的使用

editor.vue重点

富文本聚焦和ref获取dom节点

editor组件的父传子以及watch监听

editor组件的防抖子传父

富文本组件的粘贴纯文本

（🎉🎉🎉额外的） getCurrentInstance 选择dom方式

setting.vue

directives自定义指令

原生点击复制

electron打开文件夹和打开默认浏览器链接

错误收集

vue3 errorHandler

errorLog.ts封装对Error类型输出为日志文件

获取软件安装位置

输出日志文件

获取electron版本等信息

打包

deleteBuild.js

使用electron+vue开发一个跨平台todolist（便签）桌面应用

桌面应用跨端开发的一些框架

前端开发人员的桌面应用神器 Electron

Electron + Vue跨平台桌面应用开发实战教程（一）

Electron + Vue跨平台桌面应用开发实战教程（二）

Electron + Vue跨平台桌面应用开发实战教程（三）

Electron 大神的修炼之路

程序员必备五款浏览器插件