Creación del proyecto
Contenido del curso
Creación del proyecto
Contenido del curso
Francisco Javier Saavedra Alcala
Alvaro Eduardo Armijos Sarango
Daniel Chaveau
Sergio Fernandez
Yefreilee Danny Samuel Parra
Alan German Beck
Eduardo Razo Cobián
Ángel David Vargas Hernández
Mauricio Jourdan
Javier Andrés Moreno Tocarruncho
Eduardo Torres
Rodolfo Parada
Diana Martinez
Matium Stuart Guillen Bogantes
José Daniel Calle Briceño
Yefreilee Danny Samuel Parra
Diana Martinez
Carlos Rodríguez
Daniel Pinto Salazar
Alexandra Salazar
Kevin Fiorentino
Eden Gomez Gress
Eden Gomez Gress
THALIA CUADROS
Helio Sampe Reyes
Aberto Jorge Saavedra Angel
José Rafael Gutierrez Blanco
Diana Martinez
Rodolfo Parada
Diana Martinez
Yefreilee Danny Samuel Parra
Diana Martinez
Yefreilee Danny Samuel Parra
Laureano Andres Lopez Ortiz
ALVARO ZENON QUISPE SEGALES
Eduardo Razo Cobián
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 💃
Genial
Eres grande, jajaja
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
Que bien, no sabia que se pudiera hacer eso desde la terminal, buen aporte, gracias!
idolo, gracias !
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, }, }, ], };
Muchas gracias!
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
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
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", },
estaá dificil seguir este curso ya que es posible que estee desactualizado, he buscado como solucionarlo los problemas y no puedo.
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.
npm run lint --fix
con eso arreglarán errores que tengan
Necesitan utilizar Prettier.
Ctrl + Shift + P
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",
Claro, también puedes asegurarte de ponerle a los componentes nombres de al menos dos palabras, tipo HomePage.vue, ButtonComponent.vue, etc...
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í
Gracias por tu configuración en los archivos .eslintignore .eslintrc.js .prettierignore y .prettierrc.json
¿Que gestor de paquetes me recomiendan utilizar YARN o NPM? (es la última pregunta del Wizzard de creación del proyecto)
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.
Una de las opciones y funcionó :) ¡Gracias!
igual he usando componentes con dos palabras separados por - me dió error buscaré otro curso este no me gustó
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"
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
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.
me siento desepcionado con este curso.....lo mejorarán??
¿Qué te gustaría ver en una renovación de este curso?
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!
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.
Gracias Profesora
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.
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 });
En el archivo vue.config.js añadi al linea: "lintOnSave: false," Para que pare de revisar al guardar cada modificación...