Inicio » Cursos » VUE.JS CRUD en PHP y MYSQL

Curso VUE.JS CRUD en PHP y MYSQL

Capitulo 3 ➜ Vincular Vue.js y Axios en una página web

Vincular Vue.js y Axios en una página web

¿Cómo integrar o vincular Vue.js en una página web?¿Cómo usarlo?

Para vincular las librerías JS debemos de obtener las Urls y ponerlas dentro de la etiqueta head de nuestra web, luego debemos verificar su carga correcta

En la primera lección solo debemos integrar las librerías de Vue.js y Axios.js en el head de nuestra página web o documento html. Trataremos de responder las siguiente preguntas que cualquiera que empieza, se haria:

  1. ¿Cómo integrar Vue.js en una página web?
  2. ¿Cómo integrar Axios.js en una página web?
  3. ¿Cómo se que se ha cargado correctamente la librería Vue.js o Axios.js?

Existen dos formar de integrar varias formas, maneras y matices de integrar librerías en una aplicación web. En esta ocasión  usaremos la forma más sencilla, la cual consiste en tomar las url del repositorio de JS o el CDN. El código es el siguiente:

CÓDIGO PARA INTEGRAR VUE.JS Y AXIOS.JS

<!DOCTYPE html>
<html>
<head>
	<title>Integrando VUE.JS Y AXIOS</title>
	<meta charset="UTF-8">		
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>	
</head>
<body>
</body>
</html>

VERIFICAR LA CARGA CORRECTA DE LAS LIBRERÍAS

Ahora vamos a verificar si al menos carga correctamente vue.js con el código de ejemplo que tiene en su plataforma oficial.

Agregamos una capa div con el id #app y dentro una etiqueta párrafo todo ello dentro  del tag body quedando asi

<div id="app">
  <p>Hola {{mensaje}}</p>
</div>

Creamos un script al final del párrafo agregado


const app= Vue.createApp({
    data() {
        return{
            message : "Hola Vue México!!!!",         
        }
    },}).mount("#app")

Si todo funciona correctamente nos debe mostrar el mensaje  "Hola México VueJS, La blanca ciudad". Con esto estamos verificando que se ha cargado Vue.js correctamente y tenemos todas las funcionalidades para el desarrollo de nuestro aplicación web.

 


5248 visitas

Sigue con el curso: Capítulo 4 – CRUD LIST | Mostrar registros con Vue.js

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023