Plantilla de Onsen UI para Vue CLI
Vue JS 2 ofrece la herramienta de línea de comandos Vue CLI que permite crear la estructura básica de aplicaciones de una sola página (Single Page Applications, o SPA) de forma amigable. Para más detalles sobre la instalación y uso de esta herramienta recomiendo ver los siguientes enlaces:
- Tutorial de Vue.js 2 - 1. Qué es Vue.js y preparación del entorno
- Tutorial de Vue.js 2 - 2. Creación de proyecto desde plantilla
La plantilla que he creado es un fork de la plantilla de Onsen UI para PWA con Webpack, la cual a su vez se basa en la plantilla para PWA de Vue JS. La plantilla de Onsen UI incluye:
- Aplicación básica de ejemplo utilizando Onsen UI.
- Webpack, para empaquetar los componentes del sitio web.
- Recarga en caliente, para actualizar los cambios realizados en el código de forma inmediata en el navegador.
- Verificador de sintaxis (lint).
- Pruebas unitarias y de integración.
- Extracción de CSS.
- Manejo de estados utilizando Vuex.
Adicional a esto, he agregado las siguientes características en mi versión de la plantilla:
- Soporte para TypeScript.
- Uso de Vue Router para el manejo de rutas en aplicaciones de una sola página.
- Integración de Vue Router y el componente Ons Navigator, mediante Vuex, para el cambio de páginas, basado en este ejemplo.
- Axios como cliente HTTP para el consumo de servicios web.
- La aplicación de ejemplo ha sido extendida para mostrar el manejo de rutas y la descarga de datos desde servicio web.
El código fuente de la plantilla está disponible acá: https://github.com/guillegr123/ons-vue-pwa-webpack-full
Para crear una aplicación utilizando la plantilla, basta ejecutar el siguiente comando, y contestar algunas preguntas:
$ vue init guillegr123/ons-vue-pwa-webpack-full mi-app
Luego, para instalar las dependencias:
$ cd mi-app $ npm install
Y finalmente, para ejecutar en modo de desarrollo:
$ npm run dev
Con ello se muestra la siguiente aplicación de ejemplo:
Algunos puntos de interés:
- En el menú lateral existe una sección llamada "internal links", que hace referencia a las páginas dentro de la app. El resto son enlaces externos.
- En la página de "Movies" se descarga un listado de películas desde un servicio web utilizando Axios.
Cualquier comentario/sugerencia con respecto a la plantilla, así como cualquier contribución, es bienvenida.
Saludos.
Sabes que aplicaciones están hechas con ONSEN UI ?
ResponderEliminarHola. Por aca mencionan algunas aplicaciones hechas con Onsen UI: https://onsen.io/blog/categories/showcase.html
Eliminar