Creación de aplicaciones de escritorio con Electron y Vue

 

 

 

  • Clase magistral de tipografía, con Elliot Jay Stocks
  • ¡Registro!

  • Índice
    1. ¿Qué son las aplicaciones de escritorio?
    2. ¿Qué es el electrón?
      1. Instalación
    3. Creación de aplicaciones Vuejs para escritorio con Electron
      1. El complemento Vue CLI Electron Builder
      2. El archivo background.js
    4. Conclusion
      1. Related Resources

    Electron es un marco de software de código abierto desarrollado y mantenido por GitHub. Permite el desarrollo de aplicaciones GUI de escritorio utilizando tecnologías web. En este tutorial, Timi Omoyeni explica lo que debe tener en cuenta al crear una aplicación de escritorio con Vue.js utilizando el complemento Vue CLI Electron Builder .

     

    JavaScript solía ser conocido como el lenguaje para crear sitios web y aplicaciones web, especialmente con algunos de sus marcos como React, Vue y Angular, pero con el tiempo (ya en 2009), JavaScript se hizo posible ejecutar fuera del navegador con el aparición de Node.js , un entorno de ejecución de JavaScript multiplataforma y de código abierto que ejecuta código JavaScript fuera de un navegador web. Esto ha llevado a la capacidad de usar JavaScript para mucho más que solo aplicaciones web, y una de las cuales es crear aplicaciones de escritorio usando Electron.js.

    Electron le permite crear aplicaciones de escritorio con JavaScript puro al proporcionar un tiempo de ejecución con ricas API nativas (sistema operativo). Puede verlo como una variante del tiempo de ejecución de Node.js que se centra en aplicaciones de escritorio en lugar de servidores web.

    En este tutorial, aprenderemos cómo crear aplicaciones de escritorio usando Electron, también aprenderemos cómo usar Vuejs para crear aplicaciones de Electron.

    Nota : Se requieren conocimientos básicos de Vue.js y Vue CLI para seguir este tutorial. Todo el código utilizado en este tutorial se puede encontrar en mi GitHub . ¡Siéntete libre de clonarlo y jugar con él!

    ¿Qué son las aplicaciones de escritorio?

    Las aplicaciones de escritorio son aplicaciones que se ejecutan de forma independiente en computadoras de escritorio o portátiles. Son aplicaciones que realizan tareas específicas y se instalan únicamente para este fin.

     

    Un ejemplo de aplicación de escritorio es Microsoft Word , que se utiliza para crear y escribir documentos. Otros ejemplos de aplicaciones de escritorio comunes son los navegadores web, Visual Studio Code y Adobe Photoshop. Las aplicaciones de escritorio son diferentes de las aplicaciones web porque debe instalar la aplicación de escritorio para poder acceder a ella y utilizarla, y a veces no necesitan acceso a Internet para funcionar. Por otro lado, se puede acceder a las aplicaciones web simplemente visitando la URL en la que está alojada dicha aplicación y siempre necesitan acceso a Internet antes de poder acceder a ellas.

    Ejemplos de marcos utilizados en la creación de aplicaciones de escritorio incluyen:

    1. Java
      Java es un lenguaje de programación de propósito general basado en clases , orientado a objetos y diseñado para tener la menor cantidad de dependencias de implementación posible. Su objetivo es permitir a los desarrolladores de aplicaciones escribir una vez y ejecutar en cualquier lugar (WORA), lo que significa que el código Java compilado puede ejecutarse en todas las plataformas que admitan Java sin necesidad de volver a compilarlo.
    2. Java FX
      Según su documentación oficial , es una plataforma de aplicaciones cliente de próxima generación de código abierto para sistemas integrados, móviles y de escritorio construidos en Java.
    3. C#
      C# es un lenguaje de programación multiparadigma de propósito general que abarca disciplinas de programación de tipificación fuerte, alcance léxico, imperativa, declarativa, funcional, genérica, orientada a objetos y orientada a componentes.
    4. .NET
      .NET es una plataforma de desarrollo gratuita, multiplataforma y de código abierto para crear muchos tipos diferentes de aplicaciones. Con .NET, puede utilizar varios lenguajes, editores y bibliotecas para crear aplicaciones web, móviles, de escritorio, de juegos e IoT.

    ¿Qué es el electrón?

    Electron es un marco de código abierto para crear aplicaciones de escritorio. Anteriormente se conocía como 'Atom shell' y es desarrollado y mantenido por GitHub. Le permite escribir aplicaciones de escritorio multiplataforma utilizando HTML, CSS y JavaScript. Esto significa que puede crear aplicaciones de escritorio para Windows, MacOS y otras plataformas utilizando una base de código. Está basado en Node.js y Chromium . Ejemplos de aplicaciones creadas con Electron incluyen el popular editor Atom , Visual Studio Code , WordPress para escritorio y Slack .

    Instalación

    Puede instalar Electron en su proyecto usando NPM:

    npm install electron --save-dev

    También puedes instalarlo globalmente si vas a trabajar mucho con aplicaciones electrónicas usando este comando:

     

    npm install electron -g

    Creación de aplicaciones Vuejs para escritorio con Electron

    Si está familiarizado con la creación de aplicaciones web utilizando Vuejs, es posible crear aplicaciones de escritorio utilizando Vuejs. Todo lo que necesita para esto es el complemento Vue CLI Electron Builder .

    El complemento Vue CLI Electron Builder

    Esta herramienta le permite crear aplicaciones Vue para escritorio con Electron, esto significa que hace que su aplicación Vue funcione como una aplicación electrónica. Esto significa que su aplicación Vue, que posiblemente sea una aplicación web, se puede ampliar para que funcione en entornos de escritorio sin la necesidad de crear una aplicación de escritorio separada en otro marco. Esto brinda a los desarrolladores de Vue la opción y el poder de ir más allá de la web. En el futuro, puede trabajar en esa idea que tiene y ofrecer a los usuarios una opción de aplicación de escritorio, una que pueda ejecutarse en Windows, macOS y Linux.

    Para ver esto en acción, crearemos una aplicación de noticias utilizando la API de noticias . La aplicación proporcionará titulares de noticias de última hora y le permitirá buscar artículos de fuentes de noticias y blogs en toda la web con su API. Todo lo que necesita para comenzar con ellos es su clave API personal, que puede obtener desde aquí .

    Crearemos una aplicación simple que ofrezca lo siguiente:

    1. Una página que muestra los titulares principales y de última hora de un país seleccionado con la opción de elegir un país utilizando su /top-headlinespunto final. News API proporciona noticias de una lista de países que admiten; encuentre la lista aquí .
    2. Noticias de una categoría seleccionada usando una combinación de su /everythingendpoint y un parámetro de consulta qcon el que especificaremos nuestra categoría.

    Después de obtener su clave API, podemos crear nuestra aplicación usando Vue CLI . Asegúrese de tener Vue CLI instalado en su sistema; si no lo tiene, instálelo usando este comando:

    npm install -g @vue/cli# ORyarn global add @vue/cli

    Una vez hecho esto, cree su aplicación de Noticias usando la CLI:

    vue create news-app

    Obtendremos los datos de la API de noticias usando Axios para este tutorial, pero puedes usar cualquier alternativa con la que te sientas más cómodo. Puede instalar Axios utilizando cualquiera de los siguientes comandos:

    //NPMnpm install axios// YARNyarn add axios

    El siguiente paso sería configurar una instancia de Axios para la configuración global en nuestra aplicación. Crearemos una carpeta de complementos en la carpeta src donde crearemos este archivo axios.js . Después de crear el archivo, agregue las siguientes líneas de código:

    import axios from "axios";let baseURL = `https://newsapi.org/v2`;let apiKey = process.env.VUE_APP_APIKEY;const instance = axios.create({ baseURL: baseURL, timeout: 30000, headers: { "X-Api-Key": apiKey, },});export default instance;

    Aquí, definimos nuestra baseURLy apiKeyla que obtuvimos de News API y la pasamos a una nueva instancia de Axios. Esta instancia acepta baseURLy apiKeyjunto con una timeoutpropiedad. News API requiere que agregue su clave API al realizar una solicitud a su API y ofrece 3 formas de adjuntarla a su solicitud, pero aquí la agregamos a la X-Api-Keypropiedad del encabezado después de lo cual exportamos instance. Una vez hecho esto, ahora podemos usar esta configuración para todas nuestras solicitudes de Axios en nuestra aplicación.

     

    Una vez hecho esto, puede agregar el generador Plugin Electron con la CLI usando este comando:

    vue add electron-builder

    Se le pedirá que seleccione su versión preferida de Electron. Seleccioné la versión 9.0.0porque es la última versión de Electron (en el momento de escribir este artículo).

    Una vez hecho esto, ahora puede entregar su aplicación usando este comando:

    Using Yarn(strongly recommended)yarn electron:serveOR NPMnpm run electron:serve

    Tomará algún tiempo compilar y publicar su aplicación. Cuando termine, su aplicación se abrirá en su sistema, debería verse así:

    Estado de apertura automática de su aplicación electrónica. ( Vista previa grande )

    Si cierras las herramientas de desarrollo de tu aplicación, debería verse así:

    Página de destino de su aplicación. ( Vista previa grande )

    Este complemento electrónico es muy útil y fácil de usar porque cada parte del desarrollo de esta aplicación funciona de la misma manera que una aplicación Vue. Esto significa que puede tener una base de código tanto para su aplicación web como para su aplicación de escritorio. Nuestra aplicación tendrá tres partes:

    1. Una página de destino que muestra las principales noticias de un país elegido al azar.
    2. Una página para mostrar las principales noticias del país elegido por el usuario.
    3. Una página que muestra las principales noticias de una categoría seleccionada por el usuario.

    Para esto, necesitaremos un componente de encabezado para todos nuestros enlaces de navegación. Entonces, creemos un archivo en la carpeta de componentes y llamémoslo header.vue , y luego agreguemos las siguientes líneas de código:

    template header div div img src="../assets/logo.png" alt="News app logo" / /div h1News App/h1 /div nav h4 router-link to="/home"Home/router-link /h4 h4 router-link to="/top-news"Top News/router-link /h4 h4 router-link to="/categories"News By Category/router-link /h4 /nav /header/templatescript export default { name: "app-header", };/scriptstyle .header { display: flex; flex-wrap: wrap; justify-content: space-between; } .logo { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 50px; } .logo__container { width: 50px; height: 50px; } .logo__image { max-width: 100%; max-height: 100%; } .nav { display: flex; flex-wrap: wrap; width: 350px; justify-content: space-between; }/style

    Aquí, creamos un componente de encabezado que tiene el nombre y el logotipo de nuestra aplicación (la imagen se puede encontrar en mi GitHub ) junto con una sección de navegación que contiene enlaces a las otras partes de nuestra aplicación. Lo siguiente sería importar esta página en nuestra página de diseño: App.vue para que podamos ver nuestro encabezado en cada página.

     

    template div app-header / router-view / /div/templatescript import appHeader from "@/components/Header.vue"; export default { name: "layout", components: { appHeader, }, };/scriptstyle @import url("https://fonts.googleapis.com/css2?family=Abelfamily=Staatlichesdisplay=swap"); html, #app { min-height: 100vh; } #app { font-family: "Abel", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: #fff; } #app h1 { font-family: "Staatliches", cursive; } a { font-weight: bold; color: #2c3e50; text-decoration: none; } a:hover { text-decoration: underline; } a.router-link-exact-active { color: #42b983; }/style

    Aquí, reemplazamos el contenido predeterminado en la sección de plantilla con nuestro componente de encabezado recién creado después de haberlo importado y declarado en la sección de secuencia de comandos. Finalmente, agregamos algo de estilo para toda la aplicación en la sección de estilo.

    Ahora, si intentamos ver nuestra aplicación, debería verse así:

    Página de destino vacía. ( Vista previa grande )

    El siguiente paso sería agregar contenido a nuestro archivo Home.vue . Esta página albergaría la primera sección de nuestra aplicación; Noticias destacadas de un país seleccionado al azar. Actualice su archivo Home.vue con las siguientes líneas de código:

    template section h1Welcome to News App/h1 h4Displaying Top News from {{ countryInfo.name }}/h4 div v-if="articles" news-card v-for="(article, index) in articles" :key="index" :article="article" /news-card /div /section/templatescript import { mapActions, mapState } from "vuex"; import NewsCard from "../components/NewsCard"; export default { data() { return { articles: "", countryInfo: "", }; }, components: { NewsCard, }, mounted() { this.fetchTopNews(); }, computed: { ...mapState(["countries"]), }, methods: { ...mapActions(["getTopNews"]), async fetchTopNews() { let countriesLength = this.countries.length; let countryIndex = Math.floor( Math.random() * (countriesLength - 1) + 1 ); this.countryInfo = this.countries[countryIndex]; let { data } = await this.getTopNews( this.countries[countryIndex].value ); this.articles = data.articles; }, }, };/scriptstyle .articles__div { display: flex; flex-wrap: wrap; justify-content: center; }/style

    En la sección de script de este archivo, importamos mapStatey mapActionsdesde Vuex, que usaremos más adelante en este archivo. También importamos un NewsCardcomponente (lo crearemos a continuación) que mostraría todos los titulares de noticias en esta página. Luego utilizamos el fetchTopNewsmétodo para buscar las últimas noticias de un país seleccionado al azar de la variedad de countriesnuestra tienda. Este país se pasa a nuestra getTopNewsacción, esto se agregaría a baseURLcomo consulta para un país como tal baseURL/top-news?country=${randomCountry}. Una vez hecho esto, recorremos estos datos y los pasamos al articleaccesorio de nuestro Newscardcomponente en la sección de plantilla. También tenemos un párrafo que indica de qué país provienen las noticias principales. Fulares para bebés

     

    Lo siguiente sería configurar nuestro NewsCardcomponente que mostrará esta noticia. Cree un nuevo archivo dentro de su carpeta de componentes , asígnele el nombre NewsCard.vue y agréguele las siguientes líneas de código:

    template section div h1 a :href="article.url" target="_blank" {{ article.title }} /a /h1 h3 v-if="article.author"{{ article.author }}/h3 !-- p{{ article.description }}/p -- h5{{ new Date(article.publishedAt) }}/h5 /div div img src="../assets/logo.png" :data-src="article.urlToImage" :alt="article.title" / /div /section/templatescript export default { name: "news-card", props: { article: Object, }, mounted() { this.lazyLoadImages(); }, methods: { lazyLoadImages() { const images = document.querySelectorAll(".news__img"); const options = { // If the image gets within 50px in the Y axis, start the download. root: null, // Page as root rootMargin: "0px", threshold: 0.1, }; const fetchImage = (url) = { return new Promise((resolve, reject) = { const image = new Image(); image.src = url; image.onload = resolve; image.onerror = reject; }); }; const loadImage = (image) = { const src = image.dataset.src; fetchImage(src).then(() = { image.src = src; }); }; const handleIntersection = (entries) = { entries.forEach((entry) = { if (entry.intersectionRatio 0) { loadImage(entry.target); } }); }; // The observer for the images on the page const observer = new IntersectionObserver(handleIntersection, options); images.forEach((img) = { observer.observe(img); }); }, }, };/scriptstyle .news { width: 100%; display: flex; flex-direction: row; align-items: flex-start; max-width: 550px; box-shadow: 2px 1px 7px 1px #eee; padding: 20px 5px; box-sizing: border-box; margin: 15px 5px; border-radius: 4px; } .news__section { width: 100%; max-width: 350px; margin-right: 5px; } .news__title { font-size: 15px; text-align: left; margin-top: 0; } .news__author { font-size: 14px; text-align: left; font-weight: normal; } .article__published { text-align: left; } .image__container { width: 100%; max-width: 180px; max-height: 180px; } .news__img { transition: max-width 300ms cubic-bezier(0.4, 0, 1, 1), max-height 300ms cubic-bezier(0.4, 0, 1, 1); max-width: 150px; max-height: 150px; } .news__img:hover { max-width: 180px; max-height: 180px; } .article__link { text-decoration: none; color: inherit; }/style

    Aquí, mostramos los datos pasados ​​a este componente utilizando la articlepropiedad del objeto. También tenemos un método que carga de forma diferida las imágenes adjuntas a cada artículo. Este método recorre la cantidad de imágenes de artículos que tenemos y las carga de forma diferida cuando se vuelven visibles. Finalmente, tenemos estilos dirigidos a este componente en la sección de estilo.

     

    Lo siguiente será montar nuestra tienda para que podamos empezar a recibir las últimas novedades. Agregue las siguientes líneas de código a su archivo index.js :

    import Vue from "vue";import Vuex from "vuex";import axios from "../plugins/axios";Vue.use(Vuex);const store = new Vuex.Store({ state: { countries: [{ name: "United States of America", value: "us", }, { name: "Nigeria", value: "ng", }, { name: "Argentina", value: "ar", }, { name: "Canada", value: "ca", }, { name: "South Africa", value: "za", }, ], categories: [ "entertainment", "general", "health", "science", "business", "sports", "technology", ], }, mutations: {}, actions: { async getTopNews(context, country) { let res = await axios({ url: `/top-headlines?country=${country}`, method: "GET", }); return res; }, },});export default store;

    Estamos agregando dos propiedades a nuestra tienda, una de estas propiedades es countries. Esta propiedad contiene una variedad de objetos de países. También tenemos la categoriespropiedad; contiene una variedad de categorías disponibles en la API de noticias. Al lector le gustará la libertad de ver las principales noticias de países y categorías específicas; Esto también será necesario en más de una parte de la aplicación y es por eso que utilizamos la tienda. En la sección de acciones de nuestra tienda, tenemos un getTopNewsmétodo que recupera las noticias más importantes de un país (este país se pasó del componente que llamó a esta acción).

    En este punto, si abrimos nuestra aplicación, deberíamos ver nuestra página de inicio con este aspecto:

    Página de inicio actualizada. ( Vista previa grande )

    El archivo background.js

    Este archivo es el punto de entrada de Electron a su aplicación. Controla todas las configuraciones similares a las de una aplicación de escritorio para esta aplicación. El estado predeterminado de este archivo se puede encontrar en mi GitHub .

    En este archivo, tenemos algunas configuraciones predefinidas establecidas para la aplicación, como la predeterminada heighty widthpara su aplicación. Echemos un vistazo a algunas de las cosas que puede hacer en este archivo.

     

    Habilitando las herramientas de desarrollo de Vuejs

    De forma predeterminada, tiene acceso a las herramientas de desarrollo en Electron, pero no está habilitado después de la instalación. Esto se debe a un error existente en Windows 10, por lo que si abre su archivo background.js , encontrará un código comentado con comentarios que indican por qué están comentados:

    // Install Vue Devtools// Devtools extensions are broken in Electron 6.0.0 and greater// See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info// Electron will not launch with Devtools extensions installed on Windows 10 with dark mode// If you are not using Windows 10 dark mode, you may uncomment these lines// In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines// try {// await installVueDevtools()// } catch (e) {// console.error('Vue Devtools failed to install:', e.toString())// }

    Entonces, si este error no lo afecta, puede descomentar el try/catchbloque y también buscarlo installVueDevtoolsen este mismo archivo (línea 5) y también descomentarlo. Una vez hecho esto, su aplicación se reiniciará automáticamente y cuando verifique sus herramientas de desarrollo, debería ver Vuejs Devtools .

    Vuejs en herramientas de desarrollo. ( Vista previa grande )

    Seleccionar un ícono personalizado para su aplicación

    De forma predeterminada, el ícono de Electron está configurado como el ícono predeterminado para su aplicación y, la mayoría de las veces, probablemente le gustaría configurar su propio ícono personalizado. Para hacer esto, mueva su ícono a su carpeta pública y cámbiele el nombre a icon.png . Lo siguiente que debe hacer sería agregar la dependencia requerida electron-icon-builder.

    Puede instalarlo usando cualquiera de los siguientes comandos:

    // With Yarn:yarn add --dev electron-icon-builder// or with NPM:npm install --save-dev electron-icon-builder

    Una vez hecho esto, puede ejecutar el siguiente comando. Convertirá su ícono al formato Electron e imprimirá lo siguiente en su consola cuando esté hecho.

    Información generada en la terminal. ( Vista previa grande )

    Lo siguiente sería configurar la opción de icono en el archivo background.js . Esta opción va dentro de la BrowserWindowopción que se importa desde Electron. Para hacer esto, actualice BrowserWindowpara verse así:

    // Add this to the top of your file/* global __static */// import pathimport path from 'path'// Replacewin = new BrowserWindow({ width: 800, height: 600 })// Withwin = new BrowserWindow({ width: 800, height: 600, icon: path.join(__static, 'icon.png')})

    Ahora, si ejecutamos yarn run electron:buildy vemos nuestra aplicación, deberíamos ver que el ícono actualizado se usa como ícono de la aplicación, pero no cambia durante el desarrollo. Este problema ayuda a solucionarlo manualmente en macOS.

    Configuración del título para su aplicación

    Notarás que el título de tu aplicación está configurado con el nombre de la aplicación (aplicación de noticias en este caso) y tendremos que cambiarlo. Para hacer eso, tenemos que agregar una titlepropiedad al BrowserWindowmétodo en nuestro background.jsarchivo como esta:

     

    win = new BrowserWindow({ width: 600, height: 500, title: "News App", icon: path.join(__static, "icon.png"), webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, }, });

    Aquí, estamos configurando el título de nuestra aplicación como "Aplicación de noticias". Pero si su archivo index.html tiene un título seleccionado o su título no cambia a este, intente agregar este código a su archivo:

    win.on("page-title-updated", (event) = event.preventDefault());

    Estamos atentos a un evento que se activa cuando nuestro titlese actualiza desde BrowserWindow. Cuando se activa este evento, le indicamos a Electron que no actualice el título con el que se encuentra en el archivo index.html .

    Otra cosa que podría valer la pena cambiar es productName, que controla qué nombre aparece cuando pasas el cursor sobre el ícono de tu aplicación o cómo tu computadora reconoce la aplicación. En este momento, el nombre de nuestra aplicación es Electron. Para cambiar este nombre en producción, cree un archivo vue.config.js y agréguele las siguientes líneas de código:

    module.exports = { pluginOptions: { electronBuilder: { builderOptions: { productName: "News App", }, }, },};

    Here, we define productName to be ‘News App’ so that when we run the build command for our app, the name changes from ‘Electron’ to ‘News App’.

    Multi Platform Build

    By default, when you run the build command, the app that gets created is dependent on the platform that it is being run on. This means if you run the build command on Linux, the app that gets created would be a Linux desktop app. The same also applies to other platforms(macOS and windows). But Electron comes with the option to specify a platform (or two platforms) you want to generate. The available options are:

    1. mac
    2. win
    3. linux

    So in order to build the Windows version of your app, run the following command:

    // NPMnpm electron:build -- --win nsis// YARNyarn electron:build --win nsis

    Conclusion

    The completed application can be found on my GitHub. The official Electron documentation provides information and a guide that helps you customize your desktop app whichever way you want. Some of the things I tried out but aren’t included in this tutorial are:

    1. Customizing your dock on macOS — https://www.electronjs.org/docs/tutorial/macos-dock.
    2. Setting resizeable, maximizable, and many more — https://github.com/electron/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions.

    So if you’re looking to do much more with your Electron application, their official docs is a good place to start.

    Related Resources

    1. Node.jshttps://en.wikipedia.org/wiki/Node.js
    2. Java (programming language)https://en.wikipedia.org/wiki/Java_(programming_language)
    3. Electron (software framework)
    4. JavaFX 14
    5. electronjs
    6. Electron Documentation
    7. Vue CLI Plugin Electron Builder
    8. Lazy Loading Images for Performance Using Intersection Observer by Chris Nwamba
    9. axios
    10. Getting Started With Axios In Nuxthttps://www.smashingmagazine.com/2020/05/getting-started-axios-nuxt/) by Timi Omoyeni

    (ks, ra, yk, il)Explore more on

    • Apps
    • Vue
    • Electron
    • Tools
    • JavaScript





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: las características (Parte 2)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de aplicaciones de escritorio con Electron y Vue

    Creación de aplicaciones de escritorio con Electron y Vue

    Clase magistral de tipografía, con Elliot Jay Stocks ¡Registro! Índice ¿Qué son las aplicaciones de e

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-aplicaciones-de-escritorio-con-electron-y-vue-1048-0.jpg

    2024-05-21

     

    Creación de aplicaciones de escritorio con Electron y Vue
    Creación de aplicaciones de escritorio con Electron y Vue

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20