【Electron + Vue3 + TS + Vite 仿网易云】part-1

最新推荐文章于 2024-04-09 15:40:48 发布

part-time job请联系我

最新推荐文章于 2024-04-09 15:40:48 发布

阅读量505

点赞数 5

分类专栏： electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_43822217/article/details/133608098

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

使用Electron + Vue3 + TS + Vite 搭建模仿桌面网易云。
接口使用网易云API感谢大佬！

一. 搭建基础项目

项目初始化

使用pnpm初始化一个vue3+ts+vite项目

 pnpm create vite wangyiyun --template vue-ts

安装依赖

pnpm i

运行项目

pnpm dev

命令运行
运行成功
一个基础的Vue3 + TS + Vite的前端项目就初始化好了

二. 安装Electron

pnpm i electron -D

如果安装失败，出现类似RequestError: read ECONNRESET错误，
参考RequestError: read ECONNRESET
安装electron插件

pnpm i  vite-plugin-electron -D

三. 创建Electron主进程

项目根目录下创建electron-main目录，新建index.ts

import { app, BrowserWindow } from "electron";
import path from "path";
const createWindow = () => {
  const win = new BrowserWindow({
    webPreferences: {
      contextIsolation: false, // 是否开启隔离上下文
      nodeIntegration: true, // 渲染进程使用Node API
    //   preload: path.join(__dirname, "../electron-preload/index.js"), // 需要引用js文件
    },
  });
  // 如果打包了，渲染index.html
  if (app.isPackaged) {
    win.loadFile(path.join(__dirname, "../index.html"));
  } else {
    let url = "http://localhost:3000"; // 本地启动的vue项目路径
    win.loadURL(url);
  }
};
app.whenReady().then(() => {
  createWindow(); // 创建窗口
  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});
// 关闭窗口
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

四. 修改配置文件

修改tsconfig.json
在include属性里新增关于electron文件监听的配置项。

  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    
    "electron-main/**/*.ts",
    "electron-preload/**/*.ts"
  ],

修改vite.config.ts

export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: "electron-main/index.ts", // 主进程文件
    }),
  ],
  build: {
    emptyOutDir: false, // 默认情况下，若 outDir 在 root 目录下，则 Vite 会在构建时清空该目录
  },
})

修改package.json

{
  "name": "wangyiyun",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build && electron-builder",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "electron": "26.3.0",
    "rimraf": "5.0.5",
    "typescript": "^5.0.2",
    "vite": "^4.4.11",
    "vite-plugin-electron": "0.14.1",
    "vue-tsc": "^1.8.5"
  }
}