➜ 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:
- ¿Cómo integrar Vue.js en una página web?
- ¿Cómo integrar Axios.js en una página web?
- ¿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.
5709 visitas
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