介绍
这篇文章主要讲解了“怎么用轻快地+电子快速构建VUE3桌面应用的实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习”怎么用轻快地+电子快速构建VUE3桌面应用的实现”吧!
一。简介
首先,介绍下急速地和电子。
<李> 急速地是一种新型前端构建工具,能够显著提升前端开发体验。由尤大推出,其发动态表示”再也回不去webpack了……李"
<李> 电子是一个使用JavaScript、HTML和CSS构建桌面应用程序的框架。嵌入铬和节点。js到二进制的电子允许您保持一个JavaScript代码代码库并创建在Windows上运行的跨平台应用macOS和Linux——不需要本地开发经验。
当开始想用vue去开发一个桌面应用时,首先去搜索下,了解到当前如下两种现成方案:
<李> electron-vue:该项目集成度较好,封装较为完整,中文搜索下来文章较多也是该方案,可以直接上手去使用。但是,问题在于其内置电子的版本太低,写文章时看到的版本是2.0.4,而最新版的电子本是15.1.2。
<李> vue CLI电子插件生成器:该方案是集成到到vue-cli中使用,使用vue添加electron-builder后可直接上手,免去了基础配置的步骤。但是其只能在vue-cli下使用,无法配合轻快地来使用。
因此,若要使用轻快地和电子,还需要自己来配置。
二。创建一个轻快地项目
1。安装轻快地
yarn create 轻快地 2。创建项目
创建命令如下:
yarn create vite & lt; your-vue-app-name>,——template vue 此处创建一个项目,名为kuari。
yarn create vite kuari ——template vue 3。进入且运行
进入项目,在运行前需要先安装下依赖。
cd kuari
yarn 安装
yarn dev 在运行命令敲下的一瞬间,几乎是已经在运行了,不愧是轻快地。此时按照输出,打开地址预览,即可看到初始化页面。
至此一个基础的轻快地项目创建完成。
三。配置电子
1。官方文档
在电子官网的快速入门文档中,有官方给出的利用html、javascript、css来创建一个电子应用的案例,轻快地+电子的方案也借鉴其中。
2。安装
首先安装电子至轻快地应用。目前电子的版本为^ 15.1.2,。
yarn add ——dev 电子 3。配置文件
1) vite.config。js
import {, defineConfig },得到& # 39;轻快地# 39;
import vue 得到& # 39;@vitejs/plugin-vue& # 39;
import path 得到& # 39;path & # 39;,,,,,,,,,,,//,新增//https://vitejs.dev/config/export default defineConfig ({
,,基础:path.resolve (__dirname, & # 39;。/dist/& # 39;),,//,新增
,,插件:[vue ()]
}) 2) main.js
创建一个新的文件main.js,需要注意的是,该内容中索引。html的加载路径跟电子官网给的配置不同。
//, main.js//,控制应用生命周期和创建原生浏览器窗口的模组
const {应用程序的不同之处是,BrowserWindow },=,要求(& # 39;电子# 39;)
const path =,要求(& # 39;path & # 39;)
function createWindow (), {//,才能创建浏览器窗口
const 才能;mainWindow =, new BrowserWindow ({
,,,宽度:,800年,
,,,身高:,600年,
,,,webPreferences:, {
,,,,,预加载:,path.join (__dirname, & # 39; preload.js& # 39;)
,,,}
})才能//,才能加载,index . html
mainWindow.loadFile才能(& # 39;dist/index . html # 39;),//,此处跟电子官网路径不同,需要注意//,才能打开开发工具//才能,mainWindow.webContents.openDevTools ()
}//,这段程序将会在,Electron 结束初始化//,和创建浏览器窗口的时候调用//,部分,API 在,ready 事件触发后才能使用。
app.whenReady()(),=祝辞,{
createWindow才能()
app.on才能(& # 39;激活# 39;,,function (), {
,,,//,通常在,macOS 上,当点击,dock 中的应用程序图标时,如果没有其他
,,,//,打开的窗口,那么程序会重新创建一个窗口。
,,,if (BrowserWindow.getAllWindows () .length ===, 0), createWindow ()
})才能
})//,除了,macOS 外,当所有窗口都被关闭的时候退出程序只因此,通常对程序和它们在//,任务栏上的图标来说,应当保持活跃状态,直到用户使用,Cmd +, Q 退出。
app.on (& # 39; window-all-closed& # 39;,, function (), {
if 才能;(process.platform !==, & # 39;达尔文# 39;),app.quit ()
})//,在这个文件中,你可以包含应用程序剩余的所有部分的代码,//,也可以拆分成几个文件,然后用,require 导入。
