Uniapp+Vite+Vue3+Electron 快速构建桌面应用
下一篇：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: 快速入门
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！