npm install @intlify/unplugin-vue-i18n -D vite.config.ts加入下面插件: //vite.config.tsimport{defineConfig}from'vite'import{resolve,dirname}from'node:path'import{fileURLToPath}from'url'importVueI18nPluginfrom'@intlify/unplugin-vue-i18n/vite'exportdefaultdefineConfig({/* ... */plugins:[/*...
上段代码主要是一个入口文件,我们把创建创建窗口、创建监听事件、创建系统托盘等操作都风窗到了 window.ts 文件中,这里重点理解下面三个方法: window.listen() window.createWindows({ isMainWin: true }) window.createTray(); 3.2 新建 electron-main/window.ts 文件 前面的 index.ts 只是主进程的入口文件,接...
{"name":"electron_vite","private":true,"version":"1.0.0","main":"dist-electron/main.js","type":"commonjs","scripts": {"dev":"chcp 65001&&vite","build":"vue-tsc && vite build","preview":"vite preview","electron:dev":"chcp 65001&&vite --config vite.config.electron.ts"},"depe...
在渲染进程中我们使用@vueuse/electron模块方便的进行主进程与渲染进程之间的通信,比如我们打开一个新窗口,可以像如下写法。 代码如下: <template>打开新窗口</template>import { useIpcRenderer } from "@vueuse/electron";const ipcRenderer = useIpcRenderer();const openNewWin = () => {ipcRenderer.send("...
我们需要先借助Vite初始化一个Vue3+TS的项目,后面我们在逐步添加electron,在任何一个文件夹下: 执行命令: npm create vite@latest my-vue-app -- --template vue-ts 安装依赖: npm install 运行项目: npm run dev 这样一个最简单的Vue3 + TS + Vite的前端项目就初始化好了。
新建electron-main/index.ts文件 import { app, BrowserWindow } from "electron"; import* as path from "path";//本地启动的vue项目路径const localAddress = "http://localhost:5173";//创建一个新的窗口const createWindow = () =>{ const win=newBrowserWindow({ ...
然后,在vite.config.ts中引入并使用该插件: import{defineConfig}from'vite';importnodefrom'vite-plugin-node';exportdefaultdefineConfig({plugins:[node()],}); 1. 2. 3. 4. 5. 6. 这样,Vite 就可以正确地解析和处理 Node.js 模块了。 问题二:Electron 的主进程和渲染进程文件结构 ...
在electron的preload中将fs注入 electron入口文件 preload.js 使用ts开发时,需要在全局声明fs,我这里暂时声明未any类型,日后有时间再补充具体的类型。 shims.d.ts 然后就可以在vite中不需要导入就可以使用fs模块了。 当然能用第一种方法,相对优雅的使用commonJS模块肯定是更好的,有找到问题的麻烦留个言共享一下。
npm create vite 输入指令后选择vue或者react等直接选择最下面的other,之后会有electron选项,之后会使用 npm install 下载依赖,运行后,如果运行不起来,删除node_modules重新进行下载即可 简单的介绍下 跟src有个同级的目录electron,electron下有个main.ts这个文件是主要的文件,修改桌面端页面或者配置啥的,都可以在这里配...
1. 搭建vite+vue-ts的项目 yarn create vite@ vuets_electron --template vue-tscd./vuets_electron yarn install && yarn dev AI代码助手复制代码 2. 接入electron 为了保证electron能够正常安装,在vuets_electron的根目录下创建.npmrc, 设置一下electron的镜像源 ...