Vite+Electron+Vue3

1

版本：

nodejs 16.16.0   electron@21.1.1

确保安装搭建vue3----》vue -V

npm install -g @vue/cli

2.vue create remote_desktop_vue

选择手动配置

这里如果是第一次创建项目的话，可以选择手动，然后创建完后可以保存下来，就如大家看到的第一个Rcoon一样，这个是我自己经常用的配置，所以就保存下来了
选择手动配置后，会有下面这些选项供你选择，按空格键就可以选择

说明

Babel 转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
TypeScript TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
Progressive Web App (PWA) Support 渐进式Web应用程序
Router vue-router（vue路由）
Vuex vuex（vue的状态管理模式）
CSS Pre-processors CSS 预处理器（如：less、sass）
Linter / Formatter 代码风格检查和格式化（如：ESlint）
Unit Testing 单元测试（unit tests）
E2E Testing e2e（end to end） 测试
一般我们选择 1，2，4，5，6，7就可以了
 

配置vue版本

选择class样式。

是否使用class风格的组件语法，如果在项目中想要保持使用TypeScript的class风格的话，建议选择y

这里我直接回车选择默认的

配置typescript

说明
是否使用Babel与TypeScript一起用于自动检测的填充
我直接回车选择默认的配置

配置css预编译 

说明

1. Sass/SCSS (with dart-sass) sass官方主推，推荐
2. Less 推荐
3. Stylus 不推荐

主要为css解决浏览器兼容、简化CSS代码 等问题
这里我选择默认的

配置语法检测工具

ESLint with error prevention only 只进行报错提醒
ESLint + Airbnb config 不严谨模式
ESLint + Standard config 正常模式
ESLint + Prettier 严格模式
TSLint只有在选择TypeScript时才会存在
提供一个插件化的javascript代码检测工具，ESLint + Prettier //使用较多
这里我们选择第四个 ESLint + Prettier

选择何时检测

说明

1. Lint on save 保存时检测
2. Lint and fix on commit 修复和提交时检测

这里我选择默认的

选择如何存放配置

1. In dedicated config files 存放在专用配置文件中
2. In package.json 存放在package.json中

我直接选择默认的，直接回车

 当前的配置是否保存

是否保存当前选择的配置项？
如果当前配置是经常用到的配置，建议选择y存储一下当前配置项
如果只是临时使用的话就不需要存储
我选择是，保存一下，下次使用就不用手动配置了
至此，我们的vue项目就创建好了

 vue-cli创建项目运行时prettier报错

这是因为我们使用vue-cli创建项目的时候，使用了如下组合： Eslint+prettier 这两种起了冲突

这种时候，

1. 如果项目已经安装（执行  npm install）的话，需要卸载eslint，命令如下：

npm uninstall eslint --save

然后在package.json文件里删除"@vue/cli-plugin-eslint",以及 所有带有eslint字段的key

然后重新执行npm install就行

无需删除package-lock.json文件里的内容。

2. 如果项目没安装，直接在package.json文件里删除"@vue/cli-plugin-eslint",以及 所有带有eslint字段的key，然后执行npm install就行。

接下来就可以自如的修改文件，不会因为CRLF或者LF报错啦！

electron部分

1. vue add electron-builder

 修改background.ts

 安装typescript和ts-loader

npm install typescript
npm install ts-loader@8.2.0

运行

npm run electron:serve
编译

npm run electron:build

electron+vue项目中的通信

1、在vue中引入ipcRenderer

在vue文件中引入ipcRenderer，需要先在vue.config.js中配置 nodeIntegration: true

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

然后在各个vue文件中引入import { ipcRenderer } from 'electron'

或者

const {ipcRenderer} = window.require('electron');

2、渲染进程通知主进程

即在vue文件中通知主进程

1. vue中

   methods:{
       remoteDesktop() {
         ipcRenderer.send('pong', '你好呀，我是渲染进程');
   	  }	
     }

   2.主进程中

//动态适应宽高
    let { width, height } = screen.getPrimaryDisplay().workAreaSize;
  // 创建浏览器窗口
  mainWindow = new BrowserWindow({
    width: width - 300,
    height: height - 200,
    webPreferences: {
        preload: path.join(__dirname, "preload.js"),
        contextIsolation: false,
        nodeIntegration: true,
        enableRemoteModule: true,
        webviewTag: true,
        webSecurity: false,
    //   nodeIntegration: true,
    //   contextIsolation: false,
    //   webSecurity: false,
    }
  });

ipcMain.on('pong', (e, args) => {
    console.log('这里是主进程pong', args)
  })