en VueJS

Presentando Cordovue – Cordova + Vuejs + Webpack

Presentando Cordovue

Hola a todos, en esta entrada vengo a presentar el proyecto que mostré hace un tiempo en mi cuenta de Twitter,  llamado Cordovue con el cual busqué unificar dos herramientas con las que he estado trabajando mucho últimamente, Vue y Cordova/Phonegap.

El objetivo del proyecto como mencionaba antes, se trata de una “plantilla” con apenas modificacione, para utilizar todo el flujo de trabajo de Vuejs en un proyecto de Cordova/Phonegap.

  • Utiliza Webpack para minificación de archivos
  • Transpilación para escribir el código utilizando sintaxis Ecmascript6
  • Compatible con ambos frameworks, Cordova y Phonegap.
  • Permite utilizar por completo el ecosistema de Vuejs,

Estructura de un proyecto utilizando Cordovue

  • Hooks/: Ya que Cordonvue se basa en un proyecto generado con la herramienta de línea de comandos, este directorio es donde colocamos todas aquellos “scripts” con los cuales customizamos los comandos de Cordova.
  • Platforms/: Este directorio es en donde se almacenan los archivos referentes a las plataformas objetivo de nuestra aplicación (Browser, Android, iOS)
  • Plugins/: Este directorio almacena los paquetes de código que se inyectan en el webview que utiliza Cordova, para comunicarse con la plataforma nativa sobre la cual se está ejecutando la aplicación.
  • www/: Este es el directorio donde se almacena el código de la aplicación (arhivo index.html, imagenes, archivos js que intervienen en la aplicación, y hojas de estilo.)
  • .babelrc: Este archivo establece opciones para Babel, la herramienta que “transpila” el código escrito utilizando la nueva sintaxis de Javascript.
  • config.xml: Este archivo define las configuraciones que se utilizan para construir nuestra aplicación.
  • webpack.config.js: Para empaquetar, transpilar, minificar, y llevar acabo otras tareas de desarrollo, ,se utiliza Webpack, y este archivo define las configuraciones para  conseguir el mejor flujo de trabajo.

 

Creando una aplicación de ejemplo

Ahora que conocemos cómo está definido el proyecto, veamos un ejemplo de su utilización:

Podemos realizar esto de 3 formas diferentes que veremos a continuación:

Vía Git

$ git clone https://github.com/TheMushrr00m/cordovue.git MyAwesomeApp
$ cd MyAwesomeApp
$ yarn install
$ yarn run build
$ yarn run android
$ yarn run ios

Vía Phonegap

$ yarn global add phonegap
$ phonegap create MyAwesomeApp --template cordovue
$ cd MyAwesomeApp
$ yarn install
$ yarn run build
$ yarn run android
$ yarn run ios

Vía Cordova

$ yarn global add cordova
$ cordova create MyAwesomeApp --template=cordovue
$ cd MyAwesomeApp
$ yarn install
$ yarn run build
$ yarn run android
$ yarn run ios

Te invito a que pruebes el proyecto, y si encuentras algún error o tienes ideas de mejora la escribas en los comentarios.
Además podrías realizar un PR el repositorio del proyecto.

Eso es todo, en la siguiente entrada continuaremos el curso de Vuejs.
Saludos.

 

Deja un comentario