vue + Electron 制作桌面应用的示例代码

2024-12-24 03:14:27

1.vue打包

这里使用vue原生打包命令，对vue项目进行打包

npm run build

2.配置 Electron

使用 Electron 制作桌面应用需要两个配置文件 1.package.json 创建一个package.json文件，将以下代码放入

{
  "name": "demo", //项目名称
  "productName": "demo",
  "author": "作者",
  "version": "1.0.4",
  "main": "main.js",
  "description": "项目描述",
  "scripts": {
  	"start": "electron .", //启动electron项目
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps",
	"packager": "electron-packager . myClient --win --out ../myClient --arch=x64 --app-version=0.0.1 --electron-version=2.0.0" //将项目打包为exe文件
  },
  "build": {
    "electronVersion": "2.0.18",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    }
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-updater": "^2.22.1"
  },
  "devDependencies": {
    "electron-packager": "^12.1.0",
    "electron-builder": "^20.19.2"
  }
}

2.mian.js

创建main.js 将以下代码放入

【注】win.webContents.openDevTools(); 这句代码的意思是开启调试窗口，生成exe文件时需要注释掉

onst {app, BrowserWindow} =require('electron');//引入electron
let win;
const path = require('path')
let windowConfig = {
  width:800,
  height:600,
  webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('loaded',()=>{
  console.log("aaa")
});
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

const { ipcMain } = require('electron')
ipcMain.on("ping",function(even,arg){
  console.log(arg)
  even.returnValue = "pong"
})

3.将package.json文件和main.js文件放入到 vue打包完成的dist目录下

4.在dist目录下打开node命令窗口，执行 npm install 或 cnpm install 下载依赖

npm install

5.依赖下载成功后执行 npm start ，启动该项目，并查看项目是否运行成功

npm start

运行成功后的结果：

6.如果运行后没有发现bug，则执行 npm run packager ，将项目制作成exe文件，制作成功后，会在当前目录下生成桌面应用的安装包

npm run packager

打包成功后的文件夹

点击该exe文件就可以直接打开应用了

到此这篇关于vue + Electron 制作桌面应用的文章就介绍到这了,更多相关vue Electron 桌面应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vite+Electron快速构建VUE3桌面应用的实现

目录一. 简介二. 创建一个Vite项目 1. 安装 vite 2. 创建项目 3. 进入且运行三. 配置Electron 1. 官方文档 2. 安装 3. 配置文件四. 运行五. 最后一. 简介首先,介绍下vite和Electron. Vite是一种新型前端构建工具,能够显著提升前端开发体验.由尤大推出,其发动态表示"再也回不去webpack了..." Electron是一个使用 JavaScript.HTML 和 CSS 构建桌面应用程序的框架. 嵌入Chromium
Electron + vue 打包桌面操作流程详解

提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好获取Electron的资源 git clone https://github.com/el
Vue3和Electron实现桌面端应用详解

目录 Vue CLI 搭建Vue项目 Vue项目改造为markdown编辑器 Vue CLI Plugin Electron Builder 优化功能启动全屏显示修改菜单栏编辑器打开markdonw文件的内容 markdonw的内容存入文件打包为了方便记录一些个人随笔,我最近用Laravel和Vue 3.0撸了一个博客系统,其中使用到了一个基于markdown-it的 markdown 编辑器Vue组件v-md-editor.我感觉用它去编写markdown还是很方便的.后面就有了一个
vue + Electron 制作桌面应用的示例代码

1.vue打包这里使用vue原生打包命令,对vue项目进行打包 npm run build 2.配置 Electron 使用 Electron 制作桌面应用需要两个配置文件 1.package.json 创建一个package.json文件,将以下代码放入 { "name": "demo", //项目名称 "productName": "demo", "author": "作者", &
vue electron实现无边框窗口示例详解

目录一.前言二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件三.后记一.前言无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro
vue语法之拼接字符串的示例代码

本文介绍了vue语法之拼接字符串的示例代码,分享给大家,具体如下. 先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind:src="['xxx(需要拼接的字符串)'+item.picurl]" alt="" width="100%" height="245" /> </d
vue父子组件的嵌套的示例代码

本文介绍了vue父子组件的嵌套的示例代码,分享给大家,具体如下: 组件的注册: 先创建一个构造器 var myComponent = Vue.extend({ template: '...' }) 用Vue.component注册,将构造器用作组件(例为全局组件) Vue.component('my-component' , myComponent) 注册局部组件: var Child = Vue.extend({ /* ... */ }) var Parent = Vue.extend({ t
用ES6的class模仿Vue写一个双向绑定的示例代码

本文介绍了用ES6的class模仿Vue写一个双向绑定的示例代码,分享给大家,具体如下: 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods class TinyVue{ constructor({el, data, methods}){ this.$data = data this.$el = document.querySelector(el) this.$methods = methods // 初始化 this._com
Vue 实现展开折叠效果的示例代码

本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc
vue el-upload上传文件的示例代码

话不多说直接上代码 <el-upload :action="actionUrl" class="avatar-uploader" :multiple="false" name="files" ref="upload" :file-list="fileList" :on-preview="handlePreview" :on-success="hand
vue实现菜单权限控制的示例代码

大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种--前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这两种方法的优缺点以及如何实现(不熟悉vue-router API的同学可以先去官网看一波API哈). 我先简单说下项目的需求:如下图所示,有一级菜单和二级菜单,然后不同的人登录进去会展示不同的菜单. 前端控制路由的思路:将所有的路由映射表都拿到前端来维护,就是我的router.js里面将所有的菜单p
Unity实现桌面反弹的示例代码

一:演示视频二:代码实现 using UnityEngine; public class Ball : MonoBehaviour { private Rigidbody rigid; private Vector3 lastDir; public float speed = 30; private void Awake() { rigid = GetComponent<Rigidbody>(); rigid.velocity = new Vector3(1, 0, 1) * speed;
vue轻松实现虚拟滚动的示例代码

目录前言滚动原理实现源代码参考前言移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示. 长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了. 为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动. 虚拟滚动的本质,不管页面如何滑动,HTM

vue + Electron 制作桌面应用的示例代码

1.vue打包

2.配置 Electron

相关推荐

随机推荐