下一篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用(二)—实现模块热更新重载
下下篇：Uniapp+Vite+Vue3+Electron 快速构建桌面应用(三)—打包

一. 简介

首先，介绍下Uniapp和Electron

• uni-app 是一个使用 Vue.js开发所有前端应用的框架
• Electron 是一个使用 HTML、CSS和 JavaScript 构建桌面应用程序的框架

二. 创建一个uni-app项目

1. 全局安装vue-cli 若已安装则跳过

npm install -g @vue/cli@4

2. 使用Vue3/Vite/JavaScritp版

npx degit dcloudio/uni-preset-vue#vite uni-vue3-electron 

3. 进入项目并安装依赖

cd uni-vue3-electron
npm install

4. 配置 vite.config.js

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
// https://vitejs.dev/config/
export default defineConfig({
  base:'./', // 新增
  plugins: [
    uni(),
  ],
})

三. 配置Electron

1. 安装 electron 为依赖

npm install -D electron

2. 根目录新建 electron文件夹，在electron里新建main.js

// main.js 中内容如下

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
  })
  // 注意: 该路径为uniapp 发行H5/PC后生成的文件路径
  win.loadFile('dist/build/h5/index.html')
  // win.webContents.openDevTools() // 开启调试工具
}
app.whenReady().then(() => {
  createWindow()
	app.on('activate', () => {
		if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

3. 修改 package.json 文件

{
  "name": "uni-preset-vue",
  "version": "0.0.0",
  "main": "electron/main.js",  // 新增  不要复制注释
  "author": "心宽体胖的米六",  // 新增 
  "description": "My Uniapp-Electron",  // 新增
  "scripts": {
    "dev:electron": "electron .", // 新增
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
  }
}

4. 发行 H5/PC

npm run build:h5

5. 运行查看效果

npm run dev:electron

接着我们就可以看到我们桌面应用就出来咯！

6. 感言

之前一直使用uniapp，体验到了uniapp的优秀之处，但也发现了它跨端的不足(无法构建桌面应用)，这种算是一个解决方案，希望此文章能帮助更多使用uniapp与electron的用户

7. 参考资料

Uni-app: 创建应用
Electron: 快速入门