Uso de Vue.js para crear un panel meteorológico interactivo con API

 

 

 


Índice
  1. Requisitos previos
  2. Aprendizajes esperados
  • 1. El flujo de trabajo del panel
    1. Requisitos
    2. Estructura
    3. Datos
    4. Visualización
  • 2. Creando el proyecto
    1. Breve explicación de la estructura predeterminada del proyecto
  • 3. Personalización de la estructura predeterminada del proyecto
    1. Modificar archivos existentes
    2. Directorios y archivos adicionales
  • Crear un panel con datos de API suele ser un asunto complejo. Elegir su pila tecnológica, integrar API, seleccionar los gráficos correctos y embellecerlos con estilos CSS puede resultar complicado. Este tutorial es una guía paso a paso sobre cómo ayudarle a crear un panel meteorológico en Vue.js utilizando datos API.

     

    (Este es un artículo patrocinado). En este tutorial, creará un panel meteorológico simple desde cero. Será una aplicación de cliente final que no será ni un ejemplo de "Hola mundo" ni demasiado intimidante por su tamaño y complejidad.

    Todo el proyecto se desarrollará utilizando herramientas del ecosistema Node.js + npm . En particular, dependeremos en gran medida de la API Dark Sky para los datos, Vue.js para todo el trabajo pesado y FusionCharts para la visualización de datos.

    Requisitos previos

    Esperamos que esté familiarizado con lo siguiente:

    • HTML5 y CSS3 (también usaremos las funciones básicas proporcionadas por Bootstrap ;
    • JavaScript (especialmente la forma ES6 de usar el lenguaje);
    • Node.js y npm (los conceptos básicos del entorno y la gestión de paquetes están bien).

    Aparte de los mencionados anteriormente, sería fantástico si estuviera familiarizado con Vue.js o cualquier otro marco de JavaScript similar. No esperamos que conozca FusionCharts : ¡es tan fácil de usar que lo aprenderá sobre la marcha!

     

    Aprendizajes esperados

    Sus aprendizajes clave de este proyecto serán:

    1. Cómo planificar la implementación de un buen panel
    2. Cómo desarrollar aplicaciones con Vue.js
    3. Cómo crear aplicaciones basadas en datos
    4. Cómo visualizar datos usando FusionCharts

    En particular, cada una de las secciones lo acerca un paso más a los objetivos de aprendizaje:

    1. Introducción al Weather Dashboard
      Este capítulo le brinda una descripción general de los diferentes aspectos de la empresa.
    2. Crear el proyecto
      En esta sección, aprenderá a crear un proyecto desde cero utilizando la herramienta de línea de comandos de Vue.
    3. Personalice la estructura predeterminada del proyecto
      La estructura predeterminada del proyecto que obtuvo en la sección anterior no es suficiente; aquí aprenderá el material adicional necesario para el proyecto desde un punto de vista estructural.
    4. Adquisición y procesamiento de datos
      Esta sección es la esencia del proyecto; Aquí se muestra todo el código crítico para adquirir y procesar datos de la API. Espere dedicar el máximo de tiempo a esta sección.
    5. Visualización de datos con FusionCharts
      Una vez que tenemos todos los datos y otras partes móviles del proyecto estabilizados, esta sección está dedicada a visualizar los datos usando FusionCharts y un poco de CSS.

    1. El flujo de trabajo del panel

    Antes de sumergirnos en la implementación, es importante tener claro nuestro plan. Dividimos nuestro plan en cuatro aspectos distintos:

    Requisitos

    ¿Cuáles son nuestros requisitos para este proyecto? En otras palabras, ¿cuáles son las cosas que queremos mostrar a través de nuestro Weather Dashboard? Teniendo en cuenta que nuestro público objetivo probablemente sean simples mortales con gustos sencillos, nos gustaría mostrarles lo siguiente:

    • Detalles de la ubicación para la cual quieren ver el clima, junto con información primaria sobre el clima. Dado que no existen requisitos estrictos, descubriremos los detalles aburridos más adelante. Sin embargo, en esta etapa, es importante tener en cuenta que tendremos que proporcionar a la audiencia un cuadro de búsqueda para que puedan proporcionar información sobre la ubicación de su interés.
    • Información gráfica sobre el clima de su ubicación de interés, como por ejemplo:
      • Variación de temperatura para el día de la consulta
      • Lo más destacado del clima de hoy:
        • Velocidad y dirección del viento
        • Visibilidad
        • Índice UV

    Nota : Los datos obtenidos de la API proporcionan información sobre muchos otros aspectos del clima. Elegimos no usarlos todos para mantener el código al mínimo.

    Estructura

    Según los requisitos, podemos estructurar nuestro panel como se muestra a continuación:

    ( Vista previa grande )

    Datos

    Nuestro panel es tan bueno como los datos que obtenemos, porque no habrá visualizaciones bonitas sin los datos adecuados. Hay muchas API públicas que proporcionan datos meteorológicos; algunas de ellas son gratuitas y otras no. Para nuestro proyecto, recopilaremos datos de la API Dark Sky . Sin embargo, no podremos sondear el punto final de la API directamente desde el cliente. ¡No te preocupes, tenemos una solución que se revelará justo en el momento adecuado! Una vez que obtengamos los datos de la ubicación buscada, procesaremos y formatearemos algunos datos; ya sabes, el tipo de tecnicismos que nos ayudan a pagar las facturas.

     

    Visualización

    Una vez que obtenemos datos limpios y formateados, los conectamos a FusionCharts. Hay muy pocas bibliotecas de JavaScript en el mundo tan capaces como FusionCharts. De la gran cantidad de ofertas de FusionCharts, usaremos solo algunas, todas escritas en JavaScript, pero funcionan a la perfección cuando se integran con el contenedor Vue para FusionCharts .

    Armados con el panorama más amplio, ensuciémonos las manos: ¡es hora de hacer las cosas concretas! En la siguiente sección, creará el proyecto Vue básico, sobre el cual desarrollaremos más.

    2. Creando el proyecto

    Para crear el proyecto, ejecute los siguientes pasos:

    1. Instale Node.js + npm
      ( si tiene Node.js instalado en su computadora, omita este paso )
      . Node.js viene con npm incluido, por lo que no necesita instalar npm por separado. Dependiendo del sistema operativo, descargue e instale Node.js según las instrucciones que se proporcionan aquí .

      Una vez instalado, probablemente sea una buena idea verificar si el software funciona correctamente y cuáles son sus versiones. Para probar eso, abra la línea de comandos/terminal y ejecute los siguientes comandos:

      node --versionnpm --version
    2. Instalar paquetes con npm
      Una vez que tenga npm en funcionamiento, ejecute el siguiente comando para instalar los paquetes básicos necesarios para nuestro proyecto.
      npm install -g vue@2 vue-cli@2
    3. Inicialice el andamiaje del proyecto convue-cli
      Suponiendo que el paso anterior haya ido bien, el siguiente paso es utilizar una vue-cliherramienta de línea de comandos de Vue.js para inicializar el proyecto. Para hacer eso, ejecute lo siguiente:
    • Inicialice el andamio con una plantilla simple de paquete web.
      vue init webpack-simple vue_weather_dashboard 

      Se le harán un montón de preguntas: aceptar los valores predeterminados para todas menos la última pregunta será suficiente para este proyecto; respuesta Npara el último.

      ( Vista previa grande )
      Tenga en cuenta que, aunque webpack-simplees excelente para la creación rápida de prototipos y aplicaciones ligeras como la nuestra, no es particularmente adecuado para aplicaciones serias o implementación de producción. Si desea utilizar cualquier otra plantilla (aunque lo desaconsejamos si es un novato), o desea darle otro nombre a su proyecto, la sintaxis es:

      vue init [template-name] [project-name] 
    • Navegue hasta el directorio creado por vue-cli para el proyecto.
      cd vue_weather_dashboard 
    • Instale todos los paquetes mencionados en el archivo package.json, que ha sido creado por la vue-cliherramienta para la webpack-simpleplantilla.
      npm install 
    • ¡Inicie el servidor de desarrollo y vea su proyecto Vue predeterminado funcionando en el navegador!
      npm run dev 

    Si es nuevo en Vue.js , tómese un momento para saborear su último logro: ¡ha creado una pequeña aplicación Vue y se ejecuta en localhost:8080 !

     

    ( Vista previa grande )

    Breve explicación de la estructura predeterminada del proyecto

    Es hora de echar un vistazo a la estructura dentro del directorio vue_weather_dashboard, para que comprenda los conceptos básicos antes de comenzar a modificarlo.

    La estructura se parece a esto:

    vue_weather_dashboard|--- README.md|--- node_modules/| |--- ...| |--- ...| |--- [many npm packages we installed]| |--- ...| |--- ...|--- package.json|--- package-lock.json|--- webpack.config.js|--- index.html|--- src| |--- App.vue| |--- assets| | |--- logo.png| |--- main.js 

    Aunque puede resultar tentador no familiarizarse con los archivos y directorios predeterminados, si es nuevo en Vue, le recomendamos encarecidamente que al menos eche un vistazo al contenido de los archivos. Puede ser una buena sesión educativa y generar preguntas que deberías realizar por tu cuenta, especialmente los siguientes archivos:

    • package.json, y solo una mirada a su primopackage-lock.json
    • webpack.config.js
    • index.html
    • src/main.js
    • src/App.vue

    A continuación se proporciona una breve explicación de cada uno de los archivos y directorios que se muestran en el diagrama de árbol:

    • README.md
      No hay premio por adivinar: corresponde principalmente a los humanos leer y comprender los pasos necesarios para crear el andamiaje del proyecto .
    • node_modules/
      Este es el directorio donde npm descarga los paquetes necesarios para iniciar el proyecto. La información sobre los paquetes necesarios está disponible en el package.jsonarchivo.
    • package.json
      Este archivo lo crea la herramienta vue-cli según los requisitos de la webpack-simpleplantilla y contiene información sobre los paquetes npm (incluidas sus versiones y otros detalles) que deben instalarse. Observe detenidamente el contenido de este archivo; aquí es donde debe visitarlo y quizás editarlo para agregar/eliminar paquetes necesarios para el proyecto y luego ejecutar npm install. Lea más sobre package.json aquí .
    • package-lock.json
      Este archivo lo crea el propio npm y está destinado principalmente a mantener un registro de las cosas que npm descargó e instaló.
    • webpack.config.js
      Este es un archivo JavaScript que contiene la configuración de webpack, una herramienta que agrupa diferentes aspectos de nuestro proyecto (código, activos estáticos, configuración, entornos, modo de uso, etc.) y lo minimiza antes de servirlo. el usuario. El beneficio es que todo se vincula automáticamente y la experiencia del usuario mejora enormemente debido a la mejora en el rendimiento de la aplicación (las páginas se muestran rápidamente y se cargan más rápido en el navegador). Como podrá descubrir más adelante, este es el archivo que debe inspeccionarse cuando algo en el sistema de compilación no funciona como debería. Además, cuando desee implementar la aplicación, este es uno de los archivos clave que debe editarse (lea más aquí ).
    • index.html
      Este archivo HTML sirve como matriz (o, podría decirse, plantilla) donde los datos y el código se incrustarán dinámicamente (eso es lo que hace principalmente Vue) y luego se entregarán al usuario.
    • src/main.js
      Este archivo JavaScript contiene código que gestiona principalmente las dependencias de nivel superior/proyecto y define el componente Vue de nivel superior. En resumen, organiza JavaScript para todo el proyecto y sirve como punto de entrada de la aplicación. Edite este archivo cuando necesite declarar dependencias de todo el proyecto en ciertos módulos de nodo, o desee cambiar algo sobre el componente Vue superior del proyecto.
    • src/App.vue
      En el punto anterior, cuando hablábamos del “componente superior de Vue”, básicamente estábamos hablando de este archivo. Cada archivo .vue del proyecto es un componente y los componentes están relacionados jerárquicamente. Al principio, tenemos un solo .vuearchivo, es decir App.vue, como nuestro único componente. Pero en breve agregaremos más componentes a nuestro proyecto (principalmente siguiendo la estructura del panel) y los vincularemos de acuerdo con nuestra jerarquía deseada, siendo App.vue el antepasado de todos. Estos .vuearchivos contendrán código en el formato que Vue quiere que escribamos. No te preocupes, son códigos JavaScript escritos que mantienen una estructura que puede mantenernos cuerdos y organizados. Estás advertido: al final de este proyecto, si eres nuevo en Vue, ¡puedes volverte adicto a la template mdash; script mdash; styleforma de organizar el código!

    Ahora que hemos creado la base, es momento de:

     

    • Modifique las plantillas y modifique un poco los archivos de configuración para que el proyecto se comporte tal como queremos.
    • Cree nuevos .vuearchivos e implemente la estructura del panel con código Vue.

    Los aprenderemos en la siguiente sección, que será un poco larga y exige cierta atención. Si necesita cafeína o agua, o quiere descargarse, ¡ahora es el momento!


    3. Personalización de la estructura predeterminada del proyecto

    Es hora de retocar los cimientos que nos ha brindado el proyecto de andamiaje. Antes de comenzar, asegúrese de que el servidor de desarrollo proporcionado por webpackesté ejecutándose. La ventaja de ejecutar este servidor continuamente es que cualquier cambio que realice en el código fuente (al guardarlo y actualizar la página web) se refleja inmediatamente en el navegador.

    Si desea iniciar el servidor de desarrollo, simplemente ejecute el siguiente comando desde la terminal (asumiendo que su directorio actual es el directorio del proyecto):

    npm run dev

    En las siguientes secciones, modificaremos algunos de los archivos existentes y agregaremos algunos archivos nuevos. Le seguirán breves explicaciones del contenido de esos archivos, para que tenga una idea de lo que pretenden hacer esos cambios.

     

    Modificar archivos existentes

    índice.html

    Nuestra aplicación es literalmente una aplicación de una sola página, porque solo hay una página web que se muestra en el navegador. Hablaremos de esto más adelante, pero primero hagamos nuestro primer cambio: alterar el texto dentro de la titleetiqueta. Aparatos de masajes

    Con esta pequeña revisión, el archivo HTML se parece a lo siguiente:

    !DOCTYPE htmlhtml head meta charset="utf-8" !-- Modify the text of the title tag below -- titleVue Weather Dashboard/title /head body div/div script src="/dist/build.js"/script /body/html

    Tómese un momento para actualizar la página web en localhost:8080y vea el cambio reflejado en la barra de título de la pestaña del navegador; debería decir "Vue Weather Dashboard". Sin embargo, esto fue solo para demostrarle el proceso de realizar cambios y verificar si está funcionando. ¡Tenemos más cosas que hacer!

    A esta sencilla página HTML le faltan muchas cosas que queremos en nuestro proyecto, especialmente las siguientes:

    • Alguna metainformación
    • Enlaces CDN a Bootstrap (marco CSS)
    • enlace a la hoja de estilo personalizada (aún por agregar en el proyecto)
    • Punteros a la API de geolocalización de Google Maps desde scriptla etiqueta

    Luego de agregar esas cosas, la final index.htmltiene el siguiente contenido:

    !DOCTYPE htmlhtml head meta http-equiv="Content-Type" content="text/html;charset=utf-8" / meta http-equiv="X-UA-Compatible" content="IE=edge" meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" link rel="stylesheet" type="text/css" href="src/css/style.css" titleWeather Dashboard/title script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-lCjpg1xbw-nsCc11Si8Ldg2LKYizqI4libraries=places"/script /head body div/div script src="/dist/build.js"/script /body/html

    Guarde el archivo y actualice la página web. Es posible que hayas notado un ligero aumento mientras se cargaba la página; se debe principalmente al hecho de que Bootstrap ahora controla el estilo de la página y los elementos de estilo como fuentes, espaciado, etc. son diferentes del valor predeterminado que teníamos. anteriormente (si no está seguro, vuelva al valor predeterminado y vea la diferencia).

    ( Vista previa grande )

    Nota : una cosa importante antes de continuar: la URL de la API de Google Maps contiene una clave que es propiedad de FusionCharts. Por ahora, puedes usar esta clave para construir el proyecto, ya que no queremos que te atasques con este tipo de detalles minuciosos (que pueden distraerte mientras eres nuevo). Sin embargo, le recomendamos encarecidamente que genere y utilice su propia clave API de Google Maps una vez que haya progresado un poco y se sienta cómodo prestando atención a estos pequeños detalles.

    paquete.json

    Al momento de escribir esto, usamos ciertas versiones de los paquetes npm para nuestro proyecto y estamos seguros de que esas cosas funcionan juntas. Sin embargo, en el momento en que esté ejecutando el proyecto, es muy posible que las últimas versiones estables de los paquetes que npm descarga para usted no sean las mismas que usamos, y esto podría romper el código (o hacer cosas que están más allá de nuestro control). Por lo tanto, es muy importante tener exactamente el mismo package.jsonarchivo que se utilizó para construir este proyecto, para que nuestro código/explicaciones y los resultados que obtenga sean consistentes.

     

    El contenido del package.jsonarchivo debe ser:

    { "name": "vue_weather_dashboard", "description": "A Vue.js project", "version": "1.0.0", "author": "FusionCharts", "license": "MIT", "private": true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "axios": "^0.18.0", "babel": "^6.23.0", "babel-cli": "^6.26.0", "babel-polyfill": "^6.26.0", "fusioncharts": "^3.13.3", "moment": "^2.22.2", "moment-timezone": "^0.5.21", "vue": "^2.5.11", "vue-fusioncharts": "^2.0.4" }, "browserslist": [ " 1%", "last 2 versions", "not ie = 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" }}

    Le recomendamos que revise el nuevo package.jsony descubra cuáles son las funciones de los diferentes objetos en el json. Quizás prefieras cambiar el valor de la authortecla “ ” por tu nombre. Además, los paquetes mencionados en las dependencias se revelarán en el momento adecuado en el código. Por el momento basta con saber que:

    • babel-Los paquetes relacionados sirven para manejar adecuadamente el código de estilo ES6 por parte del navegador;
    • axiosse ocupa de solicitudes HTTP basadas en Promise ;
    • momenty momento-zona horaria son para manipulación de fecha/hora;
    • fusionchartsy vue-fusionchartsson responsables de representar gráficos:
    • vue, por obvias razones.

    paquete web.config.js

    Al igual que con package.json, le sugerimos que mantenga un webpack.config.jsarchivo que sea coherente con el que utilizamos para construir el proyecto. Sin embargo, antes de realizar cualquier cambio, le recomendamos que compare cuidadosamente el código predeterminado en webpack.config.jsy el código que proporcionamos a continuación. Notarás bastantes diferencias: búscalas en Google y tendrás una idea básica de lo que significan. Dado que explicar las configuraciones del paquete web en profundidad está fuera del alcance de este artículo, usted está solo en este sentido.

    El webpack.config.jsarchivo personalizado es el siguiente:

    var path = require('path')var webpack = require('webpack')module.exports = { entry: ['babel-polyfill', './src/main.js'], output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'build.js' }, module: { rules: [ { test: /.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { historyApiFallback: true, noInfo: true, overlay: true, host: '0.0.0.0', port: 8080 }, performance: { hints: false }, devtool: '#eval-source-map'}if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // https://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ])}

    Con los cambios realizados en el proyecto webpack.config.js, es imperativo que detenga el servidor de desarrollo que se está ejecutando ( Ctrl+ C) y lo reinicie con el siguiente comando ejecutado desde el directorio del proyecto después de instalar todos los paquetes mencionados en el package.jsonarchivo:

     

    npm installnpm run dev

    Con esto, termina la terrible experiencia de ajustar las configuraciones y garantizar que estén implementados los paquetes correctos. Sin embargo, esto también marca el viaje de modificación y escritura de código, que es un poco largo pero también muy gratificante.

    src/main.js

    Este archivo es la clave para la orquestación de alto nivel del proyecto; es aquí donde definimos:

    • Cuáles son las dependencias de nivel superior (dónde conseguir los paquetes npm más importantes y necesarios);
    • Cómo resolver las dependencias, junto con instrucciones para Vue sobre el uso de complementos/envoltorios, si los hubiera;
    • Una instancia de Vue que administra el componente superior del proyecto: src/App.vue(el archivo nodal .vue).

    De acuerdo con nuestros objetivos para el src/main.jsarchivo, el código debería ser:

    // Import the dependencies and necessary modulesimport Vue from 'vue';import App from './App.vue';import FusionCharts from 'fusioncharts';import Charts from 'fusioncharts/fusioncharts.charts';import Widgets from 'fusioncharts/fusioncharts.widgets';import PowerCharts from 'fusioncharts/fusioncharts.powercharts';import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';import VueFusionCharts from 'vue-fusioncharts';// Resolve the dependenciesCharts(FusionCharts);PowerCharts(FusionCharts);Widgets(FusionCharts);FusionTheme(FusionCharts);// Globally register the components for project-wide useVue.use(VueFusionCharts, FusionCharts);// Instantiate the Vue instance that controls the applicationnew Vue({ el: '#app', render: h = h(App)})

    src/App.vue

    Este es uno de los archivos más importantes de todo el proyecto y representa el componente más alto de la jerarquía: toda la aplicación en su conjunto. Para nuestro proyecto, este componente hará todo el trabajo pesado, que exploraremos más adelante. Por ahora, queremos deshacernos del texto estándar predeterminado y poner algo propio.

     

    Si es nuevo en la forma de organizar el código de Vue, sería mejor tener una idea de la estructura general dentro de los .vuearchivos. Los .vuearchivos se componen de tres secciones:

    • Plantilla
      Aquí es donde se define la plantilla HTML para la página. Además del HTML estático, esta sección también contiene la forma en que Vue incrusta contenido dinámico, utilizando llaves dobles {{ }}.
    • El script
      JavaScript gobierna esta sección y es responsable de generar contenido dinámico que va y se ubica dentro de la plantilla HTML en los lugares apropiados. Esta sección es principalmente un objeto que se exporta y consta de:
      • Datos
        Esta es una función en sí misma y generalmente devuelve algunos datos deseados encapsulados dentro de una estructura de datos agradable.
      • Métodos
        Un objeto que consta de una o más funciones/métodos, cada uno de los cuales normalmente manipula datos de una forma u otra, y también controla el contenido dinámico de la plantilla HTML.
      • Calculado
        Muy parecido al objeto método discutido anteriormente con una distinción importante: mientras que todas las funciones dentro del objeto método se ejecutan cada vez que se llama a cualquiera de ellas, las funciones dentro del objeto calculado se comportan de manera mucho más sensata y se ejecutan si y solo si tiene sido llamado.
    • Estilo
      Esta sección es para el estilo CSS que se aplica al HTML de la página (escrito dentro de la plantilla). ¡Ponga aquí el viejo CSS para hacer que sus páginas sean hermosas!

    Teniendo en cuenta el paradigma anterior, personalicemos mínimamente el código en App.vue:

    template div pThis component’s code is in {{ filename }}/p /div/templatescriptexport default { data() { return { filename: 'App.vue' } }, methods: { }, computed: { },}/scriptstyle/style

    Recuerde que el fragmento de código anterior es simplemente para probar si App.vuefunciona con nuestro propio código. Luego se realizarán muchos cambios, pero primero guarde el archivo y actualice la página en el navegador.

    ( Vista previa grande )

    En este punto, probablemente sea una buena idea obtener ayuda con las herramientas. Consulte las herramientas de desarrollo de Vue para Chrome y, si no tiene muchos problemas para usar Google Chrome como navegador predeterminado para el desarrollo, instale la herramienta y pruebe un poco con ella. Será extremadamente útil para un mayor desarrollo y depuración, cuando las cosas se vuelvan más complicadas.

    Directorios y archivos adicionales

    El siguiente paso sería agregar archivos adicionales, para que la estructura de nuestro proyecto quede completa. Agregaríamos los siguientes directorios y archivos:

    • src/css/style.css
    • src/assets/calendar.svgvlocation.svgsearch.svgwinddirection.svgwindspeed.svg
    • src/components/Content.vueHighlights.vueTempVarChart.vueUVIndex.vueVisibility.vueWindStatus.vue

    Nota : Guarde los .svgarchivos con hipervínculos en su proyecto.

     

    Cree los directorios y archivos mencionados anteriormente. La estructura final del proyecto debería verse así (recuerde eliminar carpetas y archivos de la estructura predeterminada que ahora son innecesarios):

    vue_weather_dashboard/|--- README.md|--- node_modules/| |--- ...| |--- ...| |--- [many npm packages we installed]| |--- ...| |--- ...|--- package.json|--- package-lock.json|--- webpack.config.js|--- index.html|--- src/| |--- App.vue| |--- css/| | |--- style.css | |--- assets/| | |--- calendar.svg| | |--- location.svg| | |--- location.svg| | |--- winddirection.svg| | |--- windspeed.svg| |--- main.js| |--- components/| | |--- Content.vue| | |--- Highlights.vue| | |--- TempVarChart.vue| | |--- UVIndex.vue| | |--- Visibility.vue| | |--- WindStatus.vue

    Es posible que haya otros archivos, como .babelrc , .gitignore, .editorconfig, etc. en la carpeta raíz del proyecto. Puedes ignorarlos con seguridad por ahora.

    En la siguiente sección, agregaremos contenido mínimo a los archivos recién agregados y probaremos si funcionan correctamente.

    src/css/estilo.css

    Aunque no será de mucha utilidad de inmediato, copie el siguiente código en el archivo:

    @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");:root { font-size: 62.5%;}body { font-family: Roboto; font-weight: 400; width: 100%; margin: 0; font-size: 1.6rem;}#sidebar { position: relative; display: flex; flex-direction: column; background-image: linear-gradient(-180deg, #80b6db 0%, #7da7e2 100%);}#search { text-align: center; height: 20vh; position: relative;}#location-input { height: 42px; width: 100%; opacity: 1; border: 0; border-radius: 2px; background-color: rgba(255, 255, 255, 0.2); margin-top: 16px; padding-left: 16px; color: #ffffff; font-size: 1.8rem; line-height: 21px;}#location-input:focus { outline: none;}::placeholder { color: #FFFFFF; opacity: 0.6;}#current-weather { color: #ffffff; font-size: 8rem; line-height: 106px; position: relative;}#current-weatherspan { color: #ffffff; font-size: 3.6rem; line-height: 42px; vertical-align: super; opacity: 0.8; top: 15px; position: absolute;}#weather-desc { font-size: 2.0rem; color: #ffffff; font-weight: 500; line-height: 24px;}#possibility { color: #ffffff; font-size: 16px; font-weight: 500; line-height: 19px;}#max-detail,#min-detail { color: #ffffff; 




    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Uso de Vue.js para crear un panel meteorológico interactivo con API

    Uso de Vue.js para crear un panel meteorológico interactivo con API

    Índice Requisitos previos Aprendizajes esperad

    programar

    es

    https://pseint.es/static/images/programar-uso-de-vue-965-0.jpg

    2024-04-04

     

    Uso de Vue.js para crear un panel meteorológico interactivo con API
    Uso de Vue.js para crear un panel meteorológico interactivo con API

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20