Vue 3+Vite+Eectron从入门到实战系列之一环境安装篇

news2024/11/16 22:40:13

Electron 都应该不会陌生了，是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中，Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用 - 无需原生开发经验。

实现效果

请添加图片描述

快速开始

按照官网的指导，安装最新的 nodejs 版本，要使用 Electron，你需要安装 Node.js。建议使用最新的 LTS 版本。

新建一个 vite 项目

npm create vite@latest v3-electron-app

安装依赖

cd v3-electron-app && npm install

安装 Electron

配置安装源

在根目录下面新建一个文件.npmrc，内容如下：

strict-ssl=false
registry=https://registry.npmmirror.com/
electron_mirror=https://registry.npmmirror.com/-/binary/electron/
electron_builder_binaries_mirror=https://registry.npmmirror.com/-/binary/electron-builder-binaries/
# ELECTRON_BUILDER_BINARIES_MIRROR=https://mirrors.huaweicloud.com/electron-builder-binaries/

安装 Electron

npm install electron --save-dev

完整的依赖配置如下：

{
   
  "name": "v3-electron-app",
  "private": true,
  "version": "0.0.0",
  "main": "./electron/main.js",
  "scripts": {
   
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "ele:build": "vite build && electron-builder"
  },
  "dependencies": {
   
    "vue": "^3.4.31"
  },
  "devDependencies": {
   
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.3.1",
    "electron-builder": "^24.13.3",
    "electron-devtools-installer": "^3.2.0",
    "vite": "^5.3.4&#