简介

。

Electron vue3

1 .电子商务

电子概念：

Electron是一个基于Chromium和Node.js实现的桌面APP应用程序框架，可以使用JavaScript、HTML和CSS等Web技术构建本机程序。 例如，vscode、skype、whatsapp等是基于electronjs框架开发的。

电子产品的好处：

跨越平台，开源免费，社区活跃，一次书写，Windows、Mac、Linux就会运行。 熟悉前端三剑客的html、css、js即可构建APP应用。 可以通过node.js、本机native api增强web功能体验。 内置chromium浏览器，兼容，支持html5 css3 es6语法2.Vuejs

vue概念：

Vue.js是构建用户界面的渐进式JavaScript框架，是当前流行的前端三大框架之一。

vue的好处：

组件化开发大大减少了冗馀的代码编写量，便于维护。 数据双向绑定、响应式开发、与vuejs devtools浏览器插件协作开发效率高。 虚拟dom，数据与结构分离，结构清晰。 在单页面APP应用程序中，页面将部分刷新，执行速度加快。

环境搭建

1.nodejs准备工作

安装nodejs LTS (长期支持版本)，然后安装终端以验证版本。

J:testelectronjsnode -v

v14.16.0

J:testelectronjsnpm -v

7.19.12 .安装cn pm或yarn

建议使用全球安装cnpm，配置淘宝源

npm install cnpm -g

检查cpmconfigsetregistry https://registry.NPM.Taobao.org是否已完成安装，并且源配置是否成功

j :testelectronjscnpmconfiggetregistry

3359安装registry.NPM.Taobao.org/3.vue-CLI 4环境

安装完cnpm install @vue/cli -g后，检查vue-cli的版本

J:testelectronjsvue -V

@ vue/CLI4.5. 134 .创建vue 3项目

j :testelectronjsvuecreatevueproj 1

#手动选择并安装最后一项

？ Please pick a preset:

(默认([ vue2] babel，eslint ) ) ) ) ) ) ) ) ) ) )。

(efault(vue3) [Vue 3] babel，eslint ) ) ) ) ) ) ) )。

manually选择特征

#选择要用于项目的特性模块，选中该模块中的空格，然后选择完成回车并确认下一步

？ checkthefeaturesneededforyourproject :

(选择vue版本

() Babel

(类型脚本

)主动web app (pwa )支持

(* )路由器

(* ) Vuex

(CSS前处理

(* ) Linter/Formatter

)单元测试

) e2e测试

#选择3.x版，然后返回下一步

？ chooseaversionofvue.jsthatyouwanttostarttheprojectwith

2.x

3.x

#此处选择路由是否使用历史模式，此处选择n，必须使用混列模式

？ 用户历史模式for router？ (requiresproperserversetupforindexfallbackinproduction (y/n ) n

#在此选择默认的第一个css预处理器

？ pickaCSSpre-processor(postCSS，autoprefixerandcssmodulesaresupportedbydefault ) : ) usearrowkeys () ) ) ) )

使用日期(sass/scss ) )。

sass/scss(withnode-sass ) )。

Less

Stylus

#请选择第一个默认错误代码检查

？ pickalinter/formatter config : (用户界面) ) ) ) ) ) )。

ESLint with error prevention onl

y ESLint + Airbnb config ESLint + Standard config ESLint + Prettier # 选择第一项即可 保存语法检查 ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit # 选择第一项即可，放在专用的配置文件中 ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json # 是否保存到预设给将来项目，y的话会存到.vuerc中，这里选N，等待完成创建 ? Save this as a preset for future projects? (y/N) N

5.基于vue3项目搭建electron环境

# 进到刚才创建的项目目录中 J:testelectronjs>cd vueproj1 # 使用electron-builder构建 基于vue3的electron环境 J:testelectronjsvueproj1>vue add electron-builder # 目前支持到13版本，我们选择13 ? Choose Electron Version (Use arrow keys) ^11.0.0 ^12.0.0 > ^13.0.0 # 安装完 我们检查 electron 版本 J:testelectronjsvueproj1>npx electron -v v13.3.0

6.启动开发服务

# 开发模式，实时预览 npm run electron:serve # 编译打包 npm run electron:build

效果图如下：

项目优化：

开发环境 启动优化：

# 首次 运行服务后，默认是有请求安装 vue devtools插件 INFO Launching Electron... > Failed to fetch extension, trying 4 more times Failed to fetch extension, trying 3 more times Failed to fetch extension, trying 2 more times Failed to fetch extension, trying 1 more times Failed to fetch extension, trying 0 more times Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

解决思路：

1.搭建vpn可以访问国外网络。

2.修改background.js主进程代码，注释掉 devtools相关代码

// 1.开发工具引入 这块注释 // import installExtension, { VUEJS3_DEVTOOLS } from 'electron-devtools-installer' ... // 2.应用准备好 开发环境 尝试安装扩展 这块注释 app.on('ready', async () => { // if (isDevelopment && !process.env.IS_TEST) { // // Install Vue Devtools // try { // await installExtension(VUEJS3_DEVTOOLS) // } catch (e) { // console.error('Vue Devtools failed to install:', e.toString()) // } // } createWindow() })

electron配置预加载preload.js

electron 窗口创建时支持预加载脚本，预加载preload.js脚本处于渲染进程中，支持nodejs 语法

1.在src目录下 创建 preload.js，添加如下代码：

// All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. const {contextBridge, nativeImage, ipcRenderer} = require('electron'); contextBridge.exposeInMainWorld( 'electron', { nativeImage, ipcRenderer, } )

2.在electron主进程 background.js 中配置上步创建的预加载js

// 引入node path模块 const path = require('path') ... const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { ... // 窗口创建web首选项 新增如下配置 // electron:nativeWindowOpen的默认值已被弃用，并将在electron 15中从false更改为true。 nativeWindowOpen: true, // 开启远程模块 enableRemoteModule: true, // 预加载配置，这里用到上面的path模块 preload: path.join(__dirname, 'preload.js'), } })

3.在项目根目录，创建 vue.config.js 并增加如下代码：

module.exports = { pluginOptions: { electronBuilder: { preload: 'src/preload.js', } } }

electron远程模块remote优化

remote模块在 Electron 12 中被弃用，并将在 Electron 14 中移除。它被@electron/remote模块取代 。

1.安装扩展。

cnpm install --save @electron/remote

2.安装完成 先在主进程 src/background.js 中 增加如下

// in the main process: require('@electron/remote/main').initialize() ...

3.扩展进程预加载 preload.js 添加如下代码：

将常用的remote模块，通过上下文桥梁（contextBridge）暴露给渲染器，页面可以使用window.electron.remote调用

// All of the Node.js APIs are available in the preload process. // It has the same sandbox as a Chrome extension. const {contextBridge, nativeImage, ipcRenderer} = require('electron'); const remote = require('@electron/remote'); contextBridge.exposeInMainWorld( 'electron', { nativeImage, ipcRenderer, remote } )

演示示例（调起对话框）

修改默认视图页面组件 src/views/Home.vue

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <br /> <button @click="myDialog">点击打开系统对话框</button> <!-- <HelloWorld msg="Welcome to Your Vue.js App"/>--> </div> </template> <script> // @ is an alias to /src // import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { // HelloWorld }, methods: { myDialog(){ // 通过preload.js 上下文暴露的remote对象 window.electron.remote.dialog.showMessageBox({ title: '系统对话框', type: 'info', message: '测试下系统对话框' }) } } } </script>

效果如下：

以上就是Electron13 + Vue3 搭建环境篇内容，后续推出更多的相关文章，大家敬请期待~