Creación del proyecto

Clase 2 de 21 • Curso Práctico de Vue.js

Francisco Javier Saavedra Alcala

student•

Si al igual que a mi Eslint te esta volviendo loco 🤯 sólo crea un archivo llamado .eslintignore y agrega las lineas

/build/
/config/
/dist/
/*.js
/test/unit/coverage/
*

Y listo, eslint no te molestara mas 💃

Alvaro Eduardo Armijos Sarango

student•

Genial

Daniel Chaveau

student•

Eres grande, jajaja

Sergio Fernandez

student•

En la carpeta assets pueden colocar el comando

wget https://static.platzi.com/media/public/uploads/close-icon_039b6837-d928-4f74-a2e9-7953715dbfd8.svg -O cashflow-icon.svg
wget https://static.platzi.com/media/public/uploads/trash-icon_5de37388-586f-4cb9-8ba9-1fabd994cb28.svg -O close-icon.svg
wget https://static.platzi.com/media/public/uploads/cashflow-icon_070076db-e83a-4afa-b18d-ee058c2b646e.svg -O trash-icon.svg

y asi descargan los svg al instante

Yefreilee Danny Samuel Parra

student•

Que bien, no sabia que se pudiera hacer eso desde la terminal, buen aporte, gracias!

Alan German Beck

student•

idolo, gracias !

Francisco Javier Cervantes Candelario

student•

Si les muestra el siguiente error:

!imagen

Pueden agregar una excepción en la configuración de eslint en el archivo .exlintrc.js, agregando lo siguiente:

module.exports = {
  ....
  overrides: [
    {
      files: ['src/components/**/*.vue'],
      rules: {
        'vue/multi-word-component-names': 0,
      },
    },
  ],
};

Ángel David Vargas Hernández

student•

Muchas gracias!

Mauricio Jourdan

student•

Parece más simple seguir las buenas prácticas y nombrar los componentes creados por nosotros con más de una palabra. El componente Home podría llamarse HomePage. https://es.vuejs.org/v2/style-guide/#Nombre-de-componentes-base-altamente-recomendado

Javier Andrés Moreno Tocarruncho

student•

Hola, les dejo el link de Figma que está en la clase anterior...

https://www.figma.com/file/P3EL4J17QtATlH1lqYryfG/Personal-CashFlow?node-id=0%3A1

Eduardo Torres

student•

Les comparto mi configuración para trabajar con eslint y prettier sin errores en Visual Studio Code.

Paso 1: Instalar plugin Prettier - Code formatter

Paso 2: Habilitar como default formater: CTRL + SHIFT + P -> Format Document With -> Seleccionar Prettier Code Formater.

Pas 3: Configurar el auto formateo al guardar documento Crear una carpeta en el proyecto llamado .vscode y dentro de la carpeta un archivo settings.json

Pegar el siguiente codigo

{
    "editor.formatOnSave": true
}

Por último agregar una regla de eslint para permitir que los componentes en Vue sean de una sola palabra:

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off",
  },

Rodolfo Parada

student•

estaá dificil seguir este curso ya que es posible que estee desactualizado, he buscado como solucionarlo los problemas y no puedo.

Diana Martinez

student•

Nos ayudaría mucho conocer los errores que te han surgido, seguramente podemos ayudar. Mientras tanto te recomendaría utilizar la misma versión de Vue que este curso, seguramente será más fácil, y los conceptos no cambian demasiado entre versiones, el API de Vue suele ser muy estable, sin cambios mayores.

Matium Stuart Guillen Bogantes

student•

npm run lint --fix

con eso arreglarán errores que tengan

José Daniel Calle Briceño

student•

Necesitan utilizar Prettier.

Como recomendación, activen la opción de auto formateo al "Ctrl + S"

Asegúrense de que Prettier es su formateador por defecto:

Ctrl + Shift + P
“Format document with…”

Yefreilee Danny Samuel Parra

student•

Para los que le de error de Multi-word, que ya me venia enloqueciendo, encontré en StackOverFlow esta solución: En el archivo .eslintrc.js, en la sección rules agreguen esto:

Espero le sirva a alguien mas :X saludos.

"vue/multi-word-component-names": "off",

Diana Martinez

student•

Claro, también puedes asegurarte de ponerle a los componentes nombres de al menos dos palabras, tipo HomePage.vue, ButtonComponent.vue, etc...

Carlos Rodríguez

student•

Esta es mi confugarión inicial, lo he hecho con sass con buenas prácticas en diseño y algunas configuraciones de eslint con prettier para que no les dé dolores de cabeza: . Mi repositorio commit actual: Click aquí

Daniel Pinto Salazar

student•

Gracias por tu configuración en los archivos .eslintignore .eslintrc.js .prettierignore y .prettierrc.json

Alexandra Salazar

student•

¿Que gestor de paquetes me recomiendan utilizar YARN o NPM? (es la última pregunta del Wizzard de creación del proyecto)

Kevin Fiorentino

student•

NPM es mucho más utilizado, YARN tiene otras características muy interesantes como guardar dependencias en caché. Si estás comenzando, NPM es lo mejor.

Eden Gomez Gress

student•

Yo encontre esto en Stackoverflow y me funciono, se los dejo y espero les sirva:

Eden Gomez Gress

student•

https://stackoverflow.com/questions/70346829/eslint-vue-multiword-components

THALIA CUADROS

student•

Una de las opciones y funcionó :) ¡Gracias!

Helio Sampe Reyes

student•

igual he usando componentes con dos palabras separados por - me dió error buscaré otro curso este no me gustó

Aberto Jorge Saavedra Angel

student•

Si aun tienen problemas con lo de que deben ser mas palabras para el nombre del componente, a mi me sirvio modificar el archivo package.json

la linea de codigo

"vue/multi-word-component-names": "off"

José Rafael Gutierrez Blanco

student•

buenos dias tengo una pregunta viendo el curso me he percatado de que cuando creas un componente le das un solo nombre ejemplo Home.vue, pero desde hace tiempo para acá que he trabajado poco con vue js me exige que los componente deben tener 2 nombre

Diana Martinez

student•

Si, ese es un tema de configuración del linter eslint o prettier, son reglas que cada proyecto puede configurar, y en este caso ya trae algunas por defecto, como esa de usar 2 palabras, en realidad a Vue le es indiferente, y eso ya depende del linter.

Rodolfo Parada

student•

me siento desepcionado con este curso.....lo mejorarán??

Diana Martinez

student•

¿Qué te gustaría ver en una renovación de este curso?

Yefreilee Danny Samuel Parra

student•

Lo que nunca logro entender, es porque a la profesora nunca le muestra ningun error de eslint ni prettier, estaria bueno que nos explicara eso, porque siempre hay un error!

Diana Martinez

student•

Simplemente ejecuto el fix automático al guardar los cambios, así prettier soluciona los errores fáciles, si queda alguno solo sería corregirlo a mano.

Yefreilee Danny Samuel Parra

student•

Gracias Profesora

Laureano Andres Lopez Ortiz

student•

Cuando vayas a crear el componente Home.vue, asigna un nombre diferente, por ejemplo MyHome.vue. De esta forma, te evitarás errores al desplegar la aplicación, ya que, de acuerdo con una de las reglas de Vue, los componentes no pueden ser de una sola palabra.

ALVARO ZENON QUISPE SEGALES

student•

si el slint les molesta pueden agregar la siguiente linea en el archivo "vue.config.js":

const { defineConfig } = require("@vue/cli-service"); module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false // deshabilitar slint });

Eduardo Razo Cobián

student•

En el archivo vue.config.js añadi al linea: "lintOnSave: false," Para que pare de revisar al guardar cada modificación...

wget https://static.platzi.com/media/public/uploads/close-icon_039b6837-d928-4f74-a2e9-7953715dbfd8.svg -O cashflow-icon.svg
wget https://static.platzi.com/media/public/uploads/trash-icon_5de37388-586f-4cb9-8ba9-1fabd994cb28.svg -O close-icon.svg
wget https://static.platzi.com/media/public/uploads/cashflow-icon_070076db-e83a-4afa-b18d-ee058c2b646e.svg -O trash-icon.svg

rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "vue/multi-word-component-names": "off",
  },

Creación del proyecto

Introducción

Construye una aplicación para el control de tus gastos con Vue.js

Creación del proyecto

Setup inicial

Splashscreen

Header y contenido

Layout

Vista

Resumen de datos

Agregando formato a la moneda

Componente del historial

Lista del historial

El botón para agregar

Formulario para agregar

Gráfico

Creación del SVG del gráfico

Creación de las coordenadas en el gráfico

Creación de la lógica del gráfico

Creando la interacción con el gráfico

Modelo

Modelo de datos

Agregar y quitar

Persistencia del modelo

Últimos detalles de nuestra aplicación

Cierre

Poniendo nuestra aplicación en producción en Netlify

¿Quieres más cursos de Vue?