Ionic 4 es la última versión de Ionic que utiliza componentes web gracias a Stencil
Ionic 4 le permite usar cualquier marco o biblioteca front-end de JavaScript / TypeScript, como Angular, AngularJS, Vue o React, etc. para crear aplicaciones móviles para que no se vea obligado a TypeScript y Angular como las versiones anteriores, es decir, 3.xx o anteriores.
Resumen
En este tutorial de Ionic 4 aprenderás
- cómo instalar la CLI de Vue
- cómo usar la CLI de Vue para generar un nuevo proyecto de Vue
- cómo integrar los componentes de Ionic 4 con su aplicación Vue
Generando la aplicación Vue
En primer lugar, asegúrese de tener instalado Node y NPM y luego comience instalando la CLI de Vue
$ npm install vue-cli -g
Esto instalará la CLI de Vue a nivel mundial. Si la instalación falla por motivos de permisos, es posible que desee agregar sudo a su comando.
Ahora puede crear un nuevo proyecto Vue.js basado en la plantilla Webpack, así que simplemente ejecute el siguiente comando
$ vue init webpack ionic4-vue
La CLI de Vue le pedirá un montón de información y si desea utilizar algunos componentes como el Vue Router o no. Responda esas preguntas y luego espere a que se genere su proyecto y a que se instalen las dependencias.
Luego navegue dentro de la carpeta raíz de su proyecto y ejecute
$ npm run dev
Esto iniciará el servidor de desarrollo de Webpack en el puerto 8080 . Puede navegar con su navegador web a http: // localhost: 8080 para ver su aplicación Vue en funcionamiento
Adición de Ionic 4
Para agregar componentes de Ionic 4 a su aplicación Vue, tendrá que usar el archivo principal de Ionic JS. Esa es la única forma por ahora hasta que se lance Ionic 4 final.
Así que continúe y abra el index.htmlque se encuentra en la carpeta raíz de su aplicación Vue y luego agregue la siguiente <script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>etiqueta para incluir el archivo principal de Ionic 4 que contiene los componentes de la interfaz de usuario que generalmente usa con Ionic.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>ionic4-vue</title>
<script src='https://unpkg.com/@ionic/core@0.0.2-20/dist/ionic.js'></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
A continuación, abra el src/components/HelloWorld.vuecomponente y luego agregue el siguiente contenido:
<template>
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic 4 + Vue Application </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="content" padding>
<ion-list>
<ion-item v-for="item of items" v-bind:key="item.id">
<ion-label full></ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-page>
</ion-app>
</template>
<script>
export default {
name: 'App',
data () {
return {
items: [{id: 0, name:'Ahmed'},{id:1, name: 'Naima'}]
}
},
}
</script>
Esto hace uso de <ion-list>para mostrar un conjunto de elementos.
También puede usar cualquier otro componente Ionic 4, así que no dude en experimentar con su aplicación de demostración para comprender cómo se pueden usar los componentes Ionic en Vue.
Si ejecuta su aplicación en un dispositivo móvil real, notará un problema en la escala. Puede solucionar el problema de escala en el móvil, todo lo que necesita hacer es usar una <meta>etiqueta que establezca la ventana gráfica
Agregue estas metaetiquetas desde una aplicación Ionic:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
Agregar enrutamiento / navegación
A continuación, usará el enrutador Vue para navegar entre diferentes páginas en su aplicación, ya que el controlador de navegación iónico no está disponible en Vue (es un componente angular)
Así que agregue un botón Ionic 4 en el HelloWorld.vuecomponente y vincule su controlador de clic a un método goToPage2 ()
<ion-button @click="goToPage2" full>Go To Page II</ion-button>
A continuación, en el mismo archivo, agregue el siguiente código
methods: {
goToPage2 () {
this.$router.push('page2')
}
}
El método goToPage2 () usa el método push () del Vue Router para navegar a la página 2 (conceptos similares a Ionic / Angular NavController )
Ahora necesita crear el componente de la página 2
Al src/componentscrear el archivo Page2.vue, agregue el siguiente contenido
<template>
<ion-app>
<ion-page class="show-page">
<ion-header>
<ion-toolbar>
<ion-title>Ionic 4 + Vue Application </ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="content" padding>
This is page 2
</ion-content>
</ion-page>
</ion-app>
</template>
<script>
export default {
name: 'App',
data () {
return {
}
},
methods: {
}
}
</script>
A continuación, debe crear una ruta para este componente. Ábralo src/router/index.jsy actualícelo para reflejar los cambios
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Page2 from '@/components/Page2'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/page2',
name: 'Page 2',
component: Page2
}
]
})
Importamos el componente Page2 que creamos antes y luego agregamos una nueva ruta para configurar la navegación.
También regrese Page2.vuey agregue un botón Ionic 4 para navegar de regreso a la página HelloWorld
<ion-button @click="goToHome" full>Go Home</ion-button>
Luego agregue el método goToHome a la matriz de métodos
methods: {
goToHome(){
this.$router.push('/')
}
}
Cuando usa Ionic con Angular, tiene NavController que lo revive desde que define explícitamente rutas para su aplicación, pero cuando usa Ionic con Vue, no tiene ninguna clase de ayuda de Vue para lograr lo mismo, por lo que debe definir sus rutas manualmente.
Integrando Vue con Cordova
Primero comencemos por instalar Cordova globalmente si aún no lo tiene instalado
Abra su terminal y ejecute el siguiente comando
npm install -g cordova
A continuación, debe crear un proyecto Cordova ejecutando el siguiente comando:
cordova create ionic-vue-cordova
A continuación, navegue dentro de la carpeta de su proyecto y luego copie los archivos construidos de su aplicación Vue creada previamente dentro de www de su proyecto Cordova
También asegúrese de borrar la www de cualquier archivo antes de copiar archivos Vue y agregue la siguiente línea aindex.html
Agregue el cordova.jsarchivo a index.html:
<script type="text/javascript" src="cordova.js"></script>
Una mejor manera de hacer esto es colocando su proyecto Vue dentro del proyecto Cordova y luego configure los archivos Vue Webpack para generar directamente los archivos construidos dentro de la carpeta www de Cordova
Simplemente abra y config/index.jsluego cambie la carpeta de compilación de destino a www :
build: {
index: path.resolve(__dirname, '../www/index.html'),
assetsRoot: path.resolve(__dirname, '../www'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
Además, assetsPublicPath se cambia de /.a ./esto permitirá que los archivos se carguen con Cordova.
Construyendo para iOS y Android
Crear su aplicación para Android o iOS es similar en cómo lo hace normalmente con Ionic (ya que también usa Cordova detrás de la cortina).
Entonces, primero debes agregar una plataforma de destino
cordova platform add ios --save
cordova platform add android --save
A continuación, debe crear su aplicación Vue y luego copiar los archivos dentro de la carpeta www.
npm run build
Si ha configurado la aplicación Vue para generar archivos dentro de la carpeta www directamente, no necesita copiarlos manualmente.
A continuación, use los siguientes comandos para ejecutar su aplicación en un dispositivo real
cordova run ios --device
cordova run android --device
Conclusión
En este tutorial de Ionic 4, hemos visto cómo crear una aplicación móvil simple con Vue, Ionic 4 y Cordova.
0 Comentarios
Dejanos tu comentario para seguir mejorando!