Aplicaciones de una sola p谩gina con Vue.js y Flask: Configuraci贸n de Vue.js

    Configuraci贸n y familiarizaci贸n con Vue.js

    Introducci贸n

    Esta es la publicaci贸n de apertura de una serie de tutoriales sobre el uso de Vue.js y Flask para el desarrollo web de pila completa. En esta serie, voy a demostrar c贸mo crear una aplicaci贸n web de encuestas donde la arquitectura de la aplicaci贸n consiste en un front-end compuesto por una aplicaci贸n de p谩gina 煤nica (SPA) Vue.js y una API REST de backend utilizando el marco web Flask.

    Esta primera publicaci贸n cubrir谩 la configuraci贸n y estructura b谩sicas del proyecto, utilizando la directiva Vue.js v-for y las etapas del ciclo de vida de los componentes.

    Contenido de la serie

    • Configuraci贸n y familiarizaci贸n con Vue.js (est谩 aqu铆)
    • Navegando por el enrutador Vue
    • Gesti贸n de estado con Vuex
    • API RESTful con Flask
    • Integraci贸n AJAX con API REST
    • Autenticaci贸n JWT
    • Implementaci贸n en un servidor privado virtual

    Configuraci贸n de frontend con vue-cli y webpack

    Usar茅 dos herramientas muy importantes para un proyecto de Vue.js, que son la interfaz de l铆nea de comandos (CLI) oficial de Vue.js y el paquete web de herramientas de compilaci贸n y paquete de m贸dulos muy poderoso . Ambas herramientas se basan en el tiempo de ejecuci贸n de Node.js y su administrador de paquetes, npm . Si a煤n no ha instalado el nodo, consulte los documentos de instalaci贸n de Node.js para su sistema, que tambi茅n incluir谩n una instalaci贸n de npm.

    Instale Vue.js CL (vue-cli):

    $ npm install vue-cli -g
    

    Ahora, con la CLI instalada, la usar茅 para inicializar una aplicaci贸n Vue.js SPA. La CLI hace lo siguiente:

    • Instalar y configurar webpack para empaquetar mi c贸digo
    • Instale un servidor de desarrollo con recarga en caliente (el servidor se reinicia autom谩ticamente cuando se cambia un archivo)
    • Agregar una dependencia para vue-router
    • Realice una estructura de archivos SPA de Vue.js b谩sica

    Primero creo una carpeta de alto nivel que contendr谩 todo el c贸digo para este tutorial llamado “encuesta”. A continuaci贸n, hago dos directorios m谩s llamados “frontend” (para Vue.js SPA) y “backend” (para desarrollar la API REST) 鈥嬧媦 luego cambio mi directorio de trabajo al directorio de frontend.

    $ mkdir survey
    $ cd survey
    $ mkdir frontend
    $ mkdir backend
    $ cd frontend
    

    Ahora la verdadera magia. Se ingresa el comando de inicializaci贸n de Vue CLI, que luego me pide que responda una serie de preguntas.

    Presione enter aceptando los valores predeterminados para las preguntas (i) Nombre del proyecto, (ii) Descripci贸n del proyecto, (iii) Autor del proyecto, (iv) Construir independiente. Cuando se le solicite instalar vue-router, ingrese “Y” para s铆. Ingrese “n” para las entradas restantes y acepte los valores predeterminados.

    $ vue init webpack survey-spa
    
    ? Project name survey-spa
    ? Project description A Vue.js project
    ? Author Adam McQuistan <[email聽protected]>
    ? Vue build standalone
    ? Install vue-router? No
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
    
       vue-cli 路 Generated "survey-spa".
    
    
    # Installing project dependencies ...
    ...
    

    Ahora deber铆a haber un nuevo directorio llamado “survey-spa”. Cambie los directorios a este directorio y emita un comando npm para compilar el proyecto y lanzar el servidor de desarrollo.

    $ cd survey-spa
    $ npm run dev
    

    Ahora puedo ingresar http: // localhost: 8080 en la ventana de mi navegador y deber铆a ver la p谩gina de plantilla Vue.js repetitiva similar a la que se muestra a continuaci贸n.

    La estructura de archivo que se cre贸 se parece a la que se muestra a continuaci贸n. He omitido a prop贸sito el atolladero de tonter铆as dentro de la carpeta node_modules.

    survey-spa/
    鈹溾攢鈹 README.md
    鈹溾攢鈹 build
    鈹   鈹溾攢鈹 build.js
    鈹   鈹溾攢鈹 check-versions.js
    鈹   鈹溾攢鈹 logo.png
    鈹   鈹溾攢鈹 utils.js
    鈹   鈹溾攢鈹 vue-loader.conf.js
    鈹   鈹溾攢鈹 webpack.base.conf.js
    鈹   鈹溾攢鈹 webpack.dev.conf.js
    鈹   鈹斺攢鈹 webpack.prod.conf.js
    鈹溾攢鈹 config
    鈹   鈹溾攢鈹 dev.env.js
    鈹   鈹溾攢鈹 index.js
    鈹   鈹斺攢鈹 prod.env.js
    鈹溾攢鈹 index.html
    鈹溾攢鈹 package-lock.json
    鈹溾攢鈹 package.json
    鈹溾攢鈹 src
    鈹   鈹溾攢鈹 App.vue
    鈹   鈹溾攢鈹 assets
    鈹   鈹   鈹斺攢鈹 logo.png
    鈹   鈹溾攢鈹 components
    鈹   鈹   鈹斺攢鈹 HelloWorld.vue
    鈹   鈹溾攢鈹 main.js
    鈹   鈹斺攢鈹 router
    鈹       鈹斺攢鈹 index.js
    鈹斺攢鈹 static
    

    Es probable que esto parezca un poco abrumador las primeras veces que lo mires, pero no temas, solo debemos preocuparnos por los archivos del directorio src /, m谩s el archivo index.html. Por supuesto, los otros archivos son importantes y quiz谩s alg煤n d铆a me adentre en para qu茅 se utilizan, pero por ahora ign贸relos.

    Los archivos en el directorio src / son donde escribir茅 el c贸digo para impulsar la funcionalidad de la aplicaci贸n. Abramos estos archivos y tengamos una idea de lo que est谩 sucediendo.

    index.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>survey-spa</title>
      </head>
      <body>
        <div id="app"></div>
        <!-- built files will be auto injected -->
      </body>
    </html>
    

    Este es el 煤nico archivo HTML que utiliza un Vue SPA y rara vez contiene mucho m谩s de lo que se muestra arriba, con la excepci贸n de que a veces se vincular谩 a marcos CSS y otras bibliotecas de JavaScript dentro de este archivo. El 煤nico divelemento que se produce con un valor predeterminado idde “aplicaci贸n” es al que se adjuntar谩 la instancia principal de Vue. Ese objeto Vue inyecta el HTML y CSS que est谩n en los componentes, que se discutir谩n m谩s adelante, en el divpara producir la interfaz de usuario.

    main.js

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    

    El archivo main.js es el punto de entrada principal para la aplicaci贸n y es donde registrar谩 la instancia de Vue y las extensiones como vue-router y vuex . Como puede ver, aqu铆 es donde reside la instancia de Vue. La instancia se registra en la aplicaci贸n divdiscutida anteriormente, adem谩s de que se alimenta el objeto del enrutador y el Appcomponente de alto nivel .

    Ver aplicaci贸n

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>
    

    El archivo App.vue sirve como los componentes de la aplicaci贸n de nivel superior y, a menudo, contiene el dise帽o general de la aplicaci贸n. Los componentes de Vue tienen una estructura espec铆fica que contiene una <template>secci贸n para HTML espec铆fico del componente, una <script>secci贸n para definir el Vueobjeto y los comportamientos de ese componente implementados en JavaScript, y una <styles>secci贸n para reglas CSS / SCSS. Sin embargo, ese 煤ltimo bit puede ser un poco confuso porque, de manera predeterminada, las reglas de estilo que define en un componente no solo pertenecen a ese componente. De hecho, afectan a todos los elementos de todo el proyecto a menos que agregue un scopedatributo al <style>elemento.

    enrutador / index.js

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: "https://Pharos.sh.com/",
          name: 'HelloWorld',
          component: HelloWorld
        }
      ]
    })
    

    El script index.js en el directorio del enrutador es donde se definen las URL de la aplicaci贸n y se asignan a los componentes. Las dos primeras l铆neas importan los objetos Vuey Router, que luego est谩n vinculados por el usem茅todo en el Vueobjeto.

    La ruta predeterminada que se proporciona desde la plantilla de paquete web vue-cli es simplemente la ruta ra铆z o de 铆ndice para la aplicaci贸n, que sirve al HelloWorldcomponente. Para mapear una ruta de ruta a un componente, primero debe importarse, luego debe definir un objeto de ruta en la routesmatriz d谩ndole una ruta, un nombre y el componente que se mostrar谩.

    componentes / HelloWorld.vue

    <template>
      <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>Essential Links</h2>
        <ul>
          <li>
            <a href="https://vuejs.org" target="_blank">Core Docs</a>
          </li>
          <li>
            <a href="https://forum.vuejs.org" target="_blank">Forum</a>
          </li>
          <li>
            <a href="https://chat.vuejs.org" target="_blank">Community Chat</a>
          </li>
          <li>
            <a href="https://twitter.com/vuejs" target="_blank">Twitter</a>
          </li>
          <br>
          <li>
            <a href="http://vuejs-templates.github.io/webpack/" target="_blank">
              Docs for This Template
            </a>
          </li>
        </ul>
        <h2>Ecosystem</h2>
        <ul>
          <li>
            <a href="http://router.vuejs.org/" target="_blank">vue-router</a>
          </li>
          <li>
            <a href="http://vuex.vuejs.org/" target="_blank">vuex</a>
          </li>
          <li>
            <a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a>
          </li>
          <li>
            <a href="https://github.com/vuejs/awesome-vue" target="_blank">
              awesome-vue
            </a>
          </li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data() {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    

    El directorio “componentes” es donde residen los componentes de la interfaz de usuario. El HelloWorldcomponente anterior nuevamente contiene la plantilla, el script y el estilo de tres secciones b谩sicas, que tienen alg煤n contenido de ejemplo de la plantilla de inicializaci贸n vue-cli.

    Eche un vistazo al contenido de la secci贸n de guiones. Aqu铆 ver谩 que se est谩 exportando un objeto. Este objeto se inyectar谩 en la Vueinstancia que se inicializ贸 en el archivo main.js. Dentro de este objeto de JavaScript hay un datam茅todo que devuelve un objeto. Este objeto es donde puede colocar el estado a nivel de componente (datos) y en este ejemplo es una propiedad 煤nica llamada msg.

    Puede acceder y mostrar el estado de su componente por su nombre de propiedad dentro del HTML en la secci贸n de plantilla. En el ejemplo proporcionado, ver谩 esto como {{ msg }}. Los corchetes dobles son la sintaxis de la plantilla predeterminada para realizar la interpolaci贸n de texto y est谩n inspirados en el sistema de plantillas Moustache . Cada vez que desee mostrar datos en el HTML de su componente, envu茅lvalos entre corchetes dobles.

    Traer algo de estilo

    Para darle a esta aplicaci贸n un mejor atractivo exterior, utilizar茅 el marco CSS de Bulma . El objetivo de este tutorial no ser谩 c贸mo usar Bulma, pero a煤n quiero incluirlo para evitar el aspecto mon贸tono del HTML sin estilo.

    De vuelta en la terminal en el mismo directorio que el archivo package.json, instale y guarde Bulma en el proyecto con el siguiente comando:

    $ npm install --save bulma
    

    Adem谩s, necesitar茅 instalar algunas herramientas de desarrollo para cargar correctamente los estilos de la aplicaci贸n para que los componentes sepan c贸mo trabajar con ellos. Para hacer esto, npm instala estos paquetes adicionales.

    $ npm install --save-dev vue-style-loader
    $ npm install --save-dev css-loader
    $ npm install --save-dev sass-loader
    $ npm install --save-dev node-sass
    

    Ahora abra App.vue y reemplace la secci贸n de estilo con lo que se muestra a continuaci贸n, que importar谩 el marco de bulma usando la sintaxis de importaci贸n scss.

    <style lang="scss">
    @import '~bulma/bulma'
    </style>
    

    Dale una casa (p谩gina)

    Bien, ahora que tenemos una comprensi贸n b谩sica de la estructura y las partes principales de una aplicaci贸n Vue.js SPA, puedo comenzar a escribir c贸digo.

    Comience cambiando el nombre del archivo HelloWorld.vue a Home.vue y luego borre el contenido de las secciones de plantilla, script y estilo. Adem谩s, en App.vue, elimine la l铆nea del logotipo de la imagen de Vue <img src="./assets/logo.png">y borre el contenido del <style>elemento mientras est谩 all铆. Por 煤ltimo, abra router / index.js e importe el componente Home.vue en lugar de HelloWorld.vue y actualice el objeto de ruta para usar el componente Home.

    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/components/Home'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: "https://Pharos.sh.com/",
          name: 'Home',
          component: Home
        }
      ]
    })
    

    Ahora abra el archivo Home.vue y complete la secci贸n del script con lo que se muestra a continuaci贸n.

    export default {
      data() {
        return {
          surveys: [{
          id: 1,
          name: 'Dogs',
          created_at: new Date(2017, 12, 1),
          questions: [
            {
              id: 1,
              text: 'What is your favorite dog?',
              choices: [
                { id: 1, text: 'Beagle', selected: 0 },
                { id: 2, text: 'Labrador', selected: 0 },
                { id: 3, text: 'Rottweiler', selected: 0 }]
            }, {
              id: 2,
              text: 'What is your second favorite dog?',
              choices: [
                { id: 5, text: 'Beagle', selected: 0 },
                { id: 6, text: 'Labrador', selected: 0 },
                { id: 7, text: 'Rottweiler', selected: 0 }]
            }]
          }, {
            id: 2,
            name: 'Cars',
            created_at: new Date(2017, 12, 3),
            questions: [
              {
                id: 5,
                text: 'What is your favorite car?',
                choices: [
                  { id: 17, text: 'Corvette', selected: 0 },
                  { id: 18, text: 'Mustang', selected: 0 },
                  { id: 19, text: 'Camaro', selected: 0 }]
              }, {
                id: 6,
                text: 'What is your second favorite car?',
                choices: [
                  { id: 21, text: 'Corvette', selected: 0 },
                  { id: 22, text: 'Mustang', selected: 0 },
                  { id: 23, text: 'Camaro', selected: 0 }]
              }]
          }]
        }
      }
    }
    

    Esto nos da algunos datos ficticios con los que trabajar. Como probablemente pueda ver, representa dos encuestas, una sobre perros y otra sobre autom贸viles. Los datos proporcionar谩n la unidad detr谩s del HTML que estamos a punto de escribir al proporcionar contenido para mostrar.

    Ahora, en la secci贸n de plantillas, agregar茅 un divque envolver谩 todos mis otros elementos. Cada componente de Vue debe tener un solo elemento principal, no puede haber elementos hermanos de nivel superior o el componente no se compilar谩. Dentro de este div, agregar茅 una secci贸n para un encabezado de h茅roe de Bulma .

    Debajo del encabezado habr谩 otra secci贸n para mostrar el nombre de cada encuesta y la fecha en que se cre贸. Es en este bloque de HTML donde comenzaremos a ver algunas de las maravillas que proporciona Vue.js.

    <template>
    <div>
      <section class="hero is-primary">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h2 class="title">Check out recent surveys</h2>
          </div>
        </div>
      </section>
      <section class="section">
        <div class="container">
          <div class="card" v-for="survey in surveys" v-bind:key="survey.id">
            <div class="card-content">
              <p class="title">{{ survey.name}}</p>
              <p class="subtitle">{{ survey.created_at.toDateString() }}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
    </template>
    

    Guarde los archivos no guardados en el proyecto y actualice su navegador, que ahora deber铆a aparecer como se muestra a continuaci贸n:

    Como puede ver en la captura de pantalla, se muestran dos tarjetas de encuesta Bulma. Estas dos encuestas se asignan a la matriz de objetos de encuesta que estaban en mi funci贸n de datos de mi Homecomponente, que introduje en mi HTML usando la directiva v-for.

    Eche un vistazo nuevamente a la subsecci贸n a continuaci贸n del c贸digo de la plantilla original, que representa una encuesta. Todo este elemento y sus elementos secundarios se repiten una vez para cada encuesta de la surveysmatriz. B谩sicamente, los datos impulsan la generaci贸n de HTML.

    La parte clave de v-bind: es agregar un atributo llamado keyigual a la identificaci贸n de la encuesta a cada uno divcon la clase “tarjeta”. Vue usa estas claves para realizar un seguimiento expl铆cito de cada nodo que se crea en el DOM, lo que ayuda en la contabilidad y el rendimiento. Se recomienda establecer siempre una clave 煤nica para el elemento m谩s externo que se utiliza junto con una directiva v-for.

    <div class="card" v-for="survey in surveys" v-bind:key="survey.id">
        <div class="card-content">
          <p class="title">{{ survey.name}}</p>
          <p class="subtitle">{{survey.created_at.toDateString()}}</p>
        </div>
    </div>
    

    La directiva v-for usa una sintaxis de item in itemswhere itemses un iterable, como una matriz o las propiedades de un objeto, y itemes un alias para cada elemento del iterable. Sin embargo, existen variaciones de esta sintaxis, lo que permite una mayor flexibilidad y control.

    Por ejemplo, digamos que ten铆a una matriz de letras var letters = ['a', 'd', 'a', 'm']que quer铆a usar para impulsar la creaci贸n de una lista desordenada de HTML ole regular que muestra cada letra y su 铆ndice correspondiente. Bueno, eso se podr铆a hacer con esta variaci贸n de v-for:

      <ul>
        <li v-for="(letter, i) in letters" v-bind:key="i">
          Index position {{ i }} has letter {{ letter }}
        </li>
      </ul>
    

    Dando como resultado el siguiente resultado:

    鈥 Index position 0 has letter a
    鈥 Index position 1 has letter d
    鈥 Index position 2 has letter a
    鈥 Index position 3 has letter m
    

    Para iterar sobre las propiedades de un objeto, la sintaxis es bastante similar. Dado un objeto como var person = { name: 'adam', occupation: 'software developer', residence: 'lincoln, nebraska' }, iterar con una directiva v-for se ver铆a as铆:

      <ul>
        <li v-for="(value, key) in person" v-bind:key=鈥漦ey鈥>
          key -> {{ key }}, value -> {{ value }}
        </li>
      </ul>
    
    鈥 key -> name, value -> adam
    鈥 key -> occupation, value -> software developer
    鈥 key -> residence, value -> lincoln, nebraska
    

    Burlarse de una solicitud de encuestas AJAX

    Tengo mi primer componente de interfaz de usuario funcional que muestra una colecci贸n de encuestas, pero al final la aplicaci贸n real necesitar谩 obtener datos de la encuesta de nuestra API REST. Para hacer esto un poco m谩s realista, me gustar铆a simular las funciones de una solicitud AJAX para alimentar las Homeencuestas de componentes.

    En el directorio src crea una nueva carpeta llamada “api” y luego agrega un script llamado index.js dentro de ella. Aqu铆 es donde me burlar茅 de mis funciones AJAX. En este nuevo archivo, corte y pegue la surveysmatriz del componente Home.vue como una constante global.

    // api/index.js
    
    const surveys = [{
      id: 1,
      name: 'Dogs',
      created_at: new Date(2018, 1, 1),
      questions: [{
        id: 1,
        text: 'What is your favorite dog?',
        choices: [
          { id: 1, text: 'Beagle', selected: 0 },
          { id: 2, text: 'Labrador', selected: 0 },
          { id: 3, text: 'Rottweiler', selected: 0 }]
      }, {
        id: 2,
        text: 'What is your second favorite dog?',
        choices: [
          { id: 5, text: 'Beagle', selected: 0 },
          { id: 6, text: 'Labrador', selected: 0 },
          { id: 7, text: 'Rottweiler', selected: 0 }]
      }]
    }, {
      id: 2,
      name: 'Cars',
      created_at: new Date(2018, 1, 3),
      questions: [{
        id: 5,
        text: 'What is your favorite car?',
        choices: [
          { id: 17, text: 'Corvette', selected: 0 },
          { id: 18, text: 'Mustang', selected: 0 },
          { id: 19, text: 'Camaro', selected: 0 }]
      }, {
        id: 6,
        text: 'What is your second favorite car?',
        choices: [
          { id: 21, text: 'Corvette', selected: 0 },
          { id: 22, text: 'Mustang', selected: 0 },
          { id: 23, text: 'Camaro', selected: 0 }]
      }]
    }]
    

    Debajo de esta matriz de encuestas, cree una funci贸n llamada fetchSurveysque devuelve una promesa con la matriz de encuestas despu茅s de esperar 300 milisegundos (para simular el retraso de la API). La funci贸n deber谩 exportarse para que se pueda acceder a ella desde el Homecomponente.

    export function fetchSurveys() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(surveys)
        }, 300)
      })
    }
    

    De vuelta en la funci贸n de datos del Homecomponente, inicialice la surveyspropiedad en una matriz vac铆a e importe la fetchSurveysfunci贸n dentro de la secci贸n del script.

    <script>
    import { fetchSurvey } from '@/api'
    export default {
     data() {
        return {
          surveys: []
        }
      }
    }
    </script>
    

    Los componentes de Vue tienen una serie de etapas definidas del ciclo de vida que son significativas para el desarrollador cuando hace varias cosas, como extraer datos mediante una solicitud AJAX. Para introducir datos de encuestas en el Homecomponente, necesitar茅 conectarme a una de las etapas del ciclo de vida de Vue, espec铆ficamente la beforeMountetapa. Hay varias otras etapas que son 煤tiles para muchas m谩s cosas adem谩s de las solicitudes AJAX, pero me remitir茅 a los documentos oficiales de Vue.js para obtener una explicaci贸n detallada.

    La beforeMountetapa del ciclo de vida funciona bien para la llamada a la API porque se ejecuta justo antes de que comience el montaje de nuestro componente, y justo antes de que renderse llame a nuestro componente. Esto le da tiempo para recuperar los datos antes de mostrarlos al usuario.

    Para aprovechar la beforeMountetapa del Homecomponente, todo lo que necesito hacer es agregarlo como un nuevo m茅todo al objeto Vue del componente. Dentro de esta funci贸n, realizar茅 una llamada a mi fetchSurveysfunci贸n y asignar茅 las encuestas devueltas a la datapropiedad de encuestas .

    <script>
    import { fetchSurveys } from '@/api'
    export default {
      data() {
        return {
          surveys: []
        }
      },
      beforeMount() {
        fetchSurveys().then(response => {
          this.surveys = response
        })
      }
    }
    </script>
    

    Guardar todos los archivos en el proyecto y actualizar el navegador ahora me da la misma p谩gina de inicio que vimos anteriormente, pero ahora con una llamada AJAX simulada.

     

    Conclusi贸n

    Esta publicaci贸n ha cubierto los conceptos b谩sicos de la configuraci贸n de una aplicaci贸n Vue.js SPA con vue-cli usando la plantilla de paquete web. Adem谩s de la configuraci贸n del proyecto, cubr铆 c贸mo usar datos en forma de iterable para generar din谩micamente contenido de IU utilizando la poderosa directiva v-for Vue.js. Para el 煤ltimo tema principal, toqu茅 las etapas del ciclo de vida de los componentes y c贸mo la beforeMountetapa puede ser 煤til para cargar datos en un componente con una solicitud AJAX simulada.

    En la pr贸xima publicaci贸n, cubrir茅 c贸mo usar la extensi贸n vue-router para pasar de una p谩gina a otra, dando a nuestra aplicaci贸n un concepto de flujo de trabajo. El c贸digo de este tutorial se puede encontrar en mi cuenta de GitHub, que contiene una rama para cada publicaci贸n. Gracias por leer y no dude en comentar o criticar a continuaci贸n.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *