更新时间 20210823
注意：electron 很难很难很难 安装，有梯子最好
1、配置yarn
#yarn 配置方法
yarn config set registry https://registry.npm.taobao.org/
yarn config set ELECTRON_BUILDER_BINARIES_MIRROR http://npm.taobao.org/mirrors/electron-builder-binaries/
yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/
#文件配置方法
进入文件路径 C:\Users\用户名\.yarnrc
#文件添加以下内容
ELECTRON_BUILDER_BINARIES_MIRROR "http://npm.taobao.org/mirrors/electron-builder-binaries/"
electron_mirror "https://cdn.npm.taobao.org/dist/electron/"
registry "https://registry.npm.taobao.org/"
#npm 配置方法
npm config edit
# 在弹出的ini文件中修改：
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/
electron_mirror=https://cdn.npm.taobao.org/dist/electron/
registry=https://registry.npm.taobao.org/
***无关教程---请忽略
1、查看一下当前源
yarn config get registry
2、切换为淘宝源
yarn config set registry https://registry.npm.taobao.org
3、或者切换为自带的
yarn config set registry https://registry.yarnpkg.com
2、建vite+vue
# 创建项目目录
electron-vite-vue
# 进入项目目录
cd electron-vite-vue
# 创建项目
yarn create @vitejs/app electron-vite-vue --template vue
# 安装依赖
yarn
# 运行项目
yarn dev
3、引入electron
# 安装
yarn add --dev electron
# 注意
安装过程会出现网路问题，解决方法
1、配置第一步内容
2、梯子
4、增加electron需要用到的文件
# 项目根目录添加
main.js
preload.js
image.png
5、配置main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow() {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('dist/index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
6、配置preload.js
# 按照electron最新的思路，vue页面中不能使用nodejs和electron，electron手册中要求通过preload.js隔离vue页面和main.js的交互。
# 这是electron手册中的原文
# This feature is incredibly useful for two main purposes:
# By exposing ipcRenderer(https://www.electronjs.org/docs/latest/api/ipc-renderer/) helpers to the renderer, you can use inter-process communication (IPC) to trigger main process tasks from the renderer (and vice-versa).
# If you're developing an Electron wrapper for an existing web app hosted on a remote URL, you can add custom properties onto the renderer's `window` global that can be used for desktop-only logic on the web client's side.
# 在preload.js中添加
const { contextBridge } = require('electron')
// 在vue页面中引用window.$electron.titile，获得 'electron-vite-vue'
contextBridge.exposeInMainWorld('$electron', {
title: 'electron-vite-vue'
})
# 修改src/app.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<!--修改--><HelloWorld :msg="message" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
// 引用preload.js中定义的常量
const message = window.$electron.title
// This starter template is using Vue 3 experimental <script setup> SFCs
// Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
</script>
7、修改vite项目配置文件
# 修改vite.config.js 文件，配置app项目根路径
base: path.resolve(__dirname, './dist')
# 全文
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
base: path.resolve(__dirname, './dist'),
plugins: [vue()]
})
8、修改package.json文件
# electron main 入口配置
"main": "main.js",
# electron 启动脚本配置
"electron:start": "vite build & electron ."
# 全文
{
"name": "electron-vite-vue",
"version": "1.0.0",
"main": "main.js",
"license": "MIT",
"scripts": {
"electron:start": "vite build & electron ."
},
"dependencies": {
"vue": "^3.0.5"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.3.0",
"@vue/compiler-sfc": "^3.0.5",
"electron": "^13.2.1",
"vite": "^2.4.4"
}
}
9、启动项目
yarn electron:start
npm run electron:start
10、展示
image.png
11、应用打包
# 待更新
