Electron es un marco de desarrollo de aplicaciones de escritorio popular, mientras que Vue es un marco de JavaScript popular. La combinación de estos dos marcos puede crear potentes aplicaciones de escritorio. En este artículo, presentaré cómo crear una aplicación de escritorio sencilla utilizando Vue y Electron.
- Crear un proyecto Vue
Primero, necesitamos crear un proyecto Vue. Ejecute el siguiente comando en la terminal:
vue create my-electron-app
Esto creará un nuevo proyecto de Vue.
- Instalar electrón
A continuación, necesitamos instalar Electron. Ejecute el siguiente comando en la terminal:
npm install electron --save-dev
- Configurar electrón
Cree un archivo llamado main.js en el directorio raíz del proyecto. Este archivo será nuestro proceso principal de Electron. En este archivo necesitamos agregar el siguiente código:
const {
app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
})
// 加载应用的 index.html
win.loadFile('dist/index.html')
// 打开开发者工具
win.webContents.openDevTools()
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.whenReady().then(() => {
createWindow()
})
// 当所有窗口都关闭时退出应用程序
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
Este código creará una nueva ventana de Electron y cargará el archivo index.html de nuestro proyecto Vue. También habilitamos herramientas de desarrollador para facilitar la depuración.
- Configurar Vue
A continuación, debemos actualizar nuestra configuración de Vue para que los archivos requeridos por Electron se generen en el momento de la compilación.
Agregue el siguiente código en el archivo vue.config.js:
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: 'com.my-electron-app',
productName: 'My Electron App',
win: {
icon: 'public/favicon.ico'
}
}
}
},
outputDir: 'dist',
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html'
}
}
}
Esta configuración le indicará al constructor de Vue que genere los archivos requeridos por Electron y los coloque en el directorio dist. También especificamos algunos metadatos de la aplicación, como el ID y el nombre de la aplicación.
- Construye la aplicación
Ahora podemos construir nuestra aplicación. Ejecute el siguiente comando en la terminal:
npm run build
Esto generará un directorio dist que contiene los archivos de nuestra aplicación.
- Ejecutar aplicación
Finalmente, podemos ejecutar nuestra aplicación. Ejecute el siguiente comando en la terminal:
npm run electron:serve
Esto iniciará la aplicación Electron y mostrará nuestra aplicación Vue.
Resumir:
En este artículo, aprendimos cómo crear una aplicación de escritorio sencilla utilizando Vue y Electron. Creamos un proyecto Vue y agregamos el archivo de configuración de Electron. También actualizamos la configuración de Vue para que los archivos requeridos se generen en el momento de la compilación. Finalmente, creamos la aplicación y la ejecutamos. Este sencillo ejemplo de aplicación de escritorio puede ayudarle a comprender cómo combinar Vue y Electron para crear una potente aplicación de escritorio. Si desea ampliar esta aplicación, puede agregar más componentes de Vue y funcionalidad de Electron y empaquetarlos en una aplicación distribuible.