Electron+Vue开发环境的搭建教程1（在原有Vue项目上添加Electron）

转自：https://www.hangge.com/blog/cache/detail_2667.html一、环境搭建教程1：在原有 Vue 项目上添加 Electron1，Electron 介绍（1）Electron 是由 Github 开发，用 HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。Electron 通过将 Chromium 和 Node.js 合并

狂奔之林

3198人浏览 · 2020-12-03 10:51:58

狂奔之林 · 2020-12-03 10:51:58 发布

转自：https://www.hangge.com/blog/cache/detail_2667.html

一、环境搭建教程1：在原有 Vue 项目上添加 Electron

1，Electron 介绍

（1）Electron 是由 Github 开发，用 HTML、CSS 和 JavaScript 来构建跨平台桌面应用程序的一个开源库。

Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac、Windows 和 Linux 系统下的应用来实现这一目的。
简单来说，Electron 相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，这样就可以把网页打包成一个在桌面运行的程序。

（2）官网地址：https://electronjs.org/

2，搭建 Vue 开发环境

（1）Vue.js 作为目前最热门的前端开发框架，本文演示如何搭建一个 Vue + Electron 开发环境。首先是搭建 Vue 开发环境，这里使用脚手架工具 vue-cli，具体步骤参考我之前写的文章：

Vue.js - 使用vue-cli搭建项目（附：详细操作步骤）

（2）Vue 项目创建完毕后，执行 npm run dev 命令可以启动项目，使用浏览器能够访问到如下页面即表示构建成功：

（3）然后执行 npm run build 命令可对项目进行打包，打包完成后，项目中会生成 dist 文件夹。

3，安装 Electron 依赖包

（1）由于网络问题，使用 npm 安装 Electron 会比较慢，甚至完全没有进度（一直卡在 postinstall）。这里我改用 cnpm，首先执行如下命令安装 cnpm：

1	`npm install -g cnpm --registry=https://registry.npm.taobao.org`

（2）安装后执行 cnpm -v 查看是否安装成功：

（3）接着进入 Vue 项目文件夹执行如下命令安装 Electron 依赖：

1	`cnpm install --save-dev electron`

（4）接着还需要执行如下命令安装 electron-builder，这个是用来将项目打包成可执行程序以及安装包：

1	`cnpm install --save-dev electron-builder`

（5）安装后查看项目的 package.json 文件，可以看到这个两个依赖都已添加：

4，配置 Vue 项目

（1）首先在 Vue 项目根目录下创建一个 main.js 文件，它是 Electron 主程序入口，具体内容如下：

/* jshint esversion: 6 */

const electron = require('electron');

// Module to control application life.

const app = electron.app;

// Module to create native browser window.

const BrowserWindow = electron.BrowserWindow;

// const newWindowBtn = document.getElementById('frameless-window')

const path = require('path');

const url = require('url');

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let mainWindow;

function createWindow() {

// 创建一个窗口，大小 800 * 600

mainWindow = new BrowserWindow({

width: 800,

height: 600

});

// 在窗口内要展示的内容为 ./dist/index.html，即打包生成的index.html

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, './dist', 'index.html'),

protocol: 'file:',

slashes: true

}));

// 自动打开调试台

mainWindow.webContents.openDevTools({

detach: true

});

// Open the DevTools.

// mainWindow.webContents.openDevTools()

// Emitted when the window is closed.

mainWindow.on('closed', function () {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

// 回收BrowserWindow对象

mainWindow = null;

});

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow);

// Quit when all windows are closed.

app.on('window-all-closed', function () {

// On OS X it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') {

app.quit();

}

});

app.on('activate', function () {

// On OS X it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (mainWindow === null) {

createWindow();

}

});

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

（2）接着编辑 Vue 项目的 package.json 文件，添加如下高亮内容：

第 7 行：指明主文件入口（即上面添加的 main.js 文件）
第 8~21 行：打包成可执行程序以及安装包的相关配置，注意里面 files 节点配置了哪些文件需要打包到应用中，主要是 dist 文件夹下内容以及项目根目录下的 main.js（如果没这个配置会造成打开应用是显示空白的问题。）
第 29~31 行：在原来 vue 相关命令的基础上，增加了electron 程序运行、打包命令。

{

"name": "vue_project",

"version": "1.0.0",

"description": "A Vue.js project",

"author": "",

"private": true,

"main": "main.js",

"build": {

"appId": "com.hangge.demo",

"nsis": {

"oneClick": true,

"perMachine": true,

"runAfterFinish": true

},

"files": [

"dist/static",

"dist/*.html",

"*.js"

]

},

"scripts": {

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"start": "npm run dev",

"unit": "jest --config test/unit/jest.conf.js --coverage",

"e2e": "node test/e2e/runner.js",

"test": "npm run unit && npm run e2e",

"build": "node build/build.js",

"start": "electron .",

"pack": "electron-builder --dir",

"dist": "electron-builder"

},

"dependencies": {

"vue": "^2.5.2",

"vue-router": "^3.0.1"

},

"devDependencies": {

"autoprefixer": "^7.1.2",

"babel-core": "^6.22.1",

......

5，运行桌面应用

（1）在项目文件夹下依次执行如下命令，进行编译并运行：

1 2	`npm run build` `npm run start`

（2）可以看到我们的桌面应用运行起来了：

6，生成可执行程序

（1）在项目文件夹下依次执行如下命令，进行编译并打包：

1 2	`npm run build` `npm run pack`

（2）由于我使用的是 macOS 系统，那么打包完毕后就会在项目 dist/mac 文件夹下就会生成可执行程序，双击即可执行（如果是 windows 系统则会生成 exe 程序）：

7，生成安装包

（1）在项目文件夹下依次执行如下命令，进行编译并打包：

1 2	`npm run build` `npm run dist`

（2）命令执行完毕后除了跟上面一样会生成可执行程序外，还会生成一个安装文件（macOS 系统是 dmg，windows 系统是 exe）

（3）双击它即可进行安装：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

Vue

所有评论(0)

查看更多评论

狂奔之林

@nodeman

已为社区贡献1条内容