electron vite vue3 ts项目

### 创建和配置一个基于 Electron、Vite、Vue3 和 TypeScript 的项目 为了设置一个完整的 `Electron` 项目并集成 `Vite`、`Vue3` 和 `TypeScript`，可以按照以下方法操作： #### 初始化前端部分 (Vite + Vue3 + TypeScript) 可以通过命令行快速创建一个支持 `Vue3` 和 `TypeScript` 的 `Vite` 项目。以下是具体实现方式： 对于 Yarn 用户： ```bash yarn create vite my-electron-vue-app --template vue-ts ``` 如果使用 npm（6.x 版本），则执行如下命令： ```bash npm create vite@latest my-electron-vue-app --template vue-ts ``` 如果是 npm 7+ 或更高版本，则需添加额外的双短横线参数： ```bash npm create vite@latest my-electron-vue-app -- --template vue-ts ``` 完成上述步骤后，进入新创建的项目目录，并安装依赖项： ```bash cd my-electron-vue-app yarn install # 如果使用 NPM 替代此步为 'npm install' ``` 此时已成功初始化了一个基础的 `Vite + Vue3 + TypeScript` 前端框架[^1]。 --- #### 配置 TypeScript 设置 (`tsconfig.json`) 在项目的根目录下找到 `tsconfig.json` 文件，确保其包含必要的编译选项以便更好地适配开发环境需求。例如，指定输出路径以及启用严格模式等配置可能看起来像这样： ```json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "strict": true, "jsx": "preserve", "moduleResolution": "node", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "outDir": "./dist" }, "include": ["src"], "exclude": ["node_modules", "**/*.spec.ts"] } ``` 以上配置定义了目标 JavaScript 输出标准为 ESNext 并启用了严格的类型检查功能[^2]。 --- #### 添加 Electron 支持 接下来，在现有基础上引入 `Electron` 来增强跨平台桌面应用程序的能力。首先需要安装所需的包： ```bash yarn add electron -D ``` 随后修改 `package.json` 中的脚本来兼容两者的工作流。通常会新增一条启动命令用于同时运行主进程和服务端渲染逻辑： ```json "scripts": { "dev": "vite && concurrently \"electron .\" \"vite\"", "build": "tsc && vite build" }, ``` 这里利用到了第三方库 `concurrently` 实现多任务并发处理；如果没有预先加载它的话记得先单独下载下来再继续下一步骤： ```bash yarn add concurrently -D ``` 最后一步就是编写简单的入口文件来控制窗口行为等内容。一般命名为 `main.js` 存放于源码根目录或者专门划分出来的子文件夹里边儿。下面给出一段基本代码片段作为参考： ```javascript const { app, BrowserWindow } = require('electron'); let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: false, nodeIntegration: true, } }); win.loadURL(`http://localhost:${process.env.PORT || 3000}`); } app.whenReady().then(createWindow); ``` 至此整个流程结束，你应该已经能够顺利搭建起一套集成了最新技术栈特性的现代化桌面级解决方案[^3]！ --- ### 总结 综上所述，通过合理运用现代工具链组合——即采用 `Vite` 构建高性能模块化体系结构的同时结合强大的静态分析能力赋予开发者更灵活高效的编码体验；再加上轻量级 GUI 层面封装使得最终产物具备高度可移植性和良好用户体验特性。 ---