Electron开发 —— 简单demo之整合vue

本文介绍如何将Vue项目与Electron结合,通过修改index.html、配置vue.config.js、调整package.json,实现Vue CLI项目在Electron中的运行。文章详细描述了CLI打包过程、 Electron的启动和打包,探讨了electron-builder与electron-packager的使用,并讨论了后续优化方向。
摘要由CSDN通过智能技术生成

总得有个开始

前置条件:

一:步骤:

1. 利用上一章节的demo,以及之前的vue开发系列,vue项目开发有2种模式,一种脚手架CLI生成,一种直接js引用,此处因为利用上一章节demo,故先采取js引用,仅修改的index.html,其他不变,改动如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Demo</title>
  </head>
  <body>
    <div id="app">{
   { content }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          content: '潇风剑易水',
        },
      });
    </script>
  </body>
</html>

1. 1、运行结果如下:

npm start

demo运行图:


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单Electron + Vue.js 的 Demo: 首先,你需要安装 Node.js 和 Vue CLI。然后,创建一个空的 Vue.js 项目: ``` vue create my-electron-app ``` 然后进入项目目录: ``` cd my-electron-app ``` 接着,安装 Electron: ``` npm install electron --save-dev ``` 然后在项目根目录下创建一个 `main.js` 文件,这是 Electron 的主进程代码: ```javascript const { app, BrowserWindow } = require('electron') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, contextIsolation: false, enableRemoteModule: true } }) // 加载 Vue.js 应用 win.loadURL('http://localhost:8080') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) ``` 其中,`createWindow()` 函数创建了一个 Electron 窗口,并加载了 `http://localhost:8080` 这个地址,这是后面我们要启动的 Vue.js 应用的地址。 接下来,修改 `package.json` 文件,增加以下内容: ```json { "name": "my-electron-app", "version": "0.1.0", "main": "main.js", "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "electron": "electron ." }, "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "electron": "^11.1.1", "vue-cli-plugin-electron-builder": "^2.0.0-rc.3" }, "electronBuilder": { "nodeIntegration": true, "builderOptions": { "appId": "com.example.my-electron-app", "productName": "My Electron App", "win": { "target": "nsis" } } } } ``` 其中,`electron` 命令启动了 Electron,`vue-cli-plugin-electron-builder` 是一个 Vue.js 插件,可以帮助我们打包 Electron 应用。 最后,运行以下命令启动 Vue.js 应用: ``` npm run serve ``` 然后在另外一个终端窗口中,运行以下命令启动 Electron: ``` npm run electron ``` 这样,一个简单Electron + Vue.js 的应用就创建好了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值