Beruflich Dokumente
Kultur Dokumente
Porque VueJS?
Su facilidad de aprendizaje y uso con respecto a otros frameworks y libraries como
ReactJS, su rendimiento comparado con AngularJS y la facilidad para usarlo y adaptarlo a
proyectos tanto grandes como pequeños, ha hecho que Vue gane cada vez más
popularidad.
En este Curso veremos no solo todo el sistema de vue sino q tambien veremos
herramientas para mejorar como desarrolladores entre las q tenemos:
Vuex
Vue Router
Deploy de nuestra aplicacion
y muchas cosas mas que nos ayudaran a ser mejores profesionales de VUE.JS
Introducción a VueJS
Recomendación:
Si aún no tienes conocimientos básicos, te invitamos a ver el curso Básico de
VueJS aquí
Acerca de VueJS:
Tiene complejidad inherente y complejidad instrumental.
La complejidad inherente es la que se hereda del proyecto y no se puede
modificar.
La complejidad instrumental es la que nosotros podemos controlar. Es el precio
que pagamos para resolver la complejidad inherente (herramientas).
-** VueJS** puede ser definido como el Framework Web Progresivo porque nos
permite progresivamente ir escalando nuestra aplicación a medida que lo vamos
necesitando.
Características del Framework:
Está orientado a la vista.
Es reactivo. Se puede enlazar el código con la vista. Se puede actualizar desde
cualquiera de los dos y se sincroniza todo en un círculo virtuoso.
Está basado en Core, es una librería pequeña, resuelve algo específico y
concreto. Sin embargo es escalable y extendible.
Complejidad
Inherente vs. Instrumental
.
Inherente: la que heredamos del proyecto y no podemos modificar.
Instrumental: la que podemos controlar, es el precio que pagamos para resolver
la complejidad inherente.
.
Estas complejidades tiene que ser parejas, por lo cual tienen que crecer o
decrecer a la par.
.
A Vue lo podemos definir como el framework web progresivo.
.
Características más importantes de Vue:
Está orientado a la vista: Se encarga solamente de la parte visual.
Es reactivo: puedo tener enlazo con el código, donde se pueden actualizar
mutuamente desde cualquier de las dos direcciones.
Está basado en un core: esto significa que es una librería pequeña,
resuelve algo especifico y concreto, pero es escalable, al core se le pueden más
cosas para aumentar la complejidad. Las características principales de este
core son: rendering declarativo y el sistema de componentes.
.
Las flechas rojas simbolizan el core de Vue, lo que hace por si solo.
Las flechas verdes son las cosas que podemos ir agregando a medida la vayamos
necesitando.
.
El renderizado declarativo está ligado al concepto de reactividad, implica tener un
estado centralizado desde donde podemos compartir información hacia la vista de
manera dinámica, es decir que cada vez que este estado mute se va a ver
reflejado en la vista y viceversa.
.
El sistema de componentes propone que podemos construir nuestra aplicación
mediante pequeños módulos HTML. Cada módulo maneja su propio estado y su
propia semántica, podemos establecer como se van a llamar los componentes.
.
En los archivos .vue podemos meter toda la lógica de nuestros componentes, lo
cual permite no solo tener una modularización a nivel lógico sino que a nivel físico.
Podemos tener componentes con HTML cada uno en su propio archivo, esto
genera un código fácil de mantener y cada componente tiene todo lo que necesita
para existir, su HTML, CSS y JS.
Herramientas y Experiencia de Desarrollo + Archivos
.vue
Para los que como yo, primero vieron el curso básico de Vue (que salió hace unos
meses) y después vino a ver este (que salió hace un par de años), para poder
iniciar la aplicación se debe hacer lo siguiente:
vue create nombre_aplicacion
npm run lint
npm run build
npm i -g serve (si están en linux quizá deban escribir sudo antes del
comando)
vue ui (opcional) Este solo les mostrará de una manera visual los proyectos
de vue que tengan creados.
Webpack
Babel
Babel es una herramienta que nos permite transformar nuestro código JS de última
generación (o con funcionalidades extras) a JS que cualquier navegador o versión de
Node.js entienda.
babel-core: es lo que nos permite la compilación
babel-loader: es la regla que nos permite transformar nuestro código a través de
Webpack
babel-preset-env: es el conjunto de plugins que utiliza babel para transformar
nuestro código
Eslint
Eslint es un linter de código. Es una herramienta que nos permite hacer dos tipos
de chequeo. Por un lado nos permite establecer un estilo de código homogéneo
para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los
desarrolladores de ese proyecto las cumplan y las apliquen en el código.
Por otro lado nos facilita la configuración usando reglas predefinidas. Estas reglas
se instalan como librerías de NPM que ya fueron pensadas o desarrolladas por
otras personas para que podamos utilizarlas.
La nueva Vue CLI 3 ya permite crear proyectos con ESLint integrado y podemos olvidarnos de
toda la configuración complicada de webpack.
Ejecuten lo siguiente:
npm uninstall vue-cli -g
y después
npm install -g @vue/cli
Con eso tendrán la última versión, que les deja crear y administrar proyectos de forma muy
sencilla y visual.
Para crear un proyecto sólo usa
vue create nombre-proyecto
Y para explorar de forma grafica el proyecto usa
vue ui
Es mucho más facil así porque puedes seleccionar desde ahí la instalación de los paquetes
que necesitas (entre ellos el ESLint, pero sin problemas de configuración)
Saludos!
Eslint es un linter de código. Es una herramienta que nos permite hacer dos tipos
de chequeo. Por un lado nos permite establecer un estilo de código homogéneo
para todo el equipo de desarrollo. Permite definir ciertas reglas para que todos los
desarrolladores de ese proyecto las cumplan y las apliquen en el código.
es importante decir que al ser un curso desactualizado, es poco util lo visto
en esta clase. pues ya cli-vue 3, se configura automatico el eslint al momento de
crear un proyecto sencillo o con valores default.
SASS y BULMA
# Less
npm install -D less-loader less
# Stylus
npm install -D stylus-loader stylus
y el archivo del componente verificamos q esta activo con:
<stylelang="scss">
h1 {
color: red;
}
</style>
PUG
npm i -D pug-loader
Las expresiones son esos parámetros que ponemos entre llaves dentro de
nuestro HTML y nos permiten representar en pantalla valores de nuestro Vue
Model.
Las expresiones nos permiten representar valores del vue model. pueden representarse
variables, objetos, operaciones aritmeticas y llamada a funciones en los methods.
Directivas
Cabe aclarar que en el uso de la directiva v-if si queremos mostrar contenido entre
v-if y v-else cuando la condición sea cierta, hay que indentar nuestro código, de lo
contrario nos dara error, ejemplo:
p(v-if="showValue")
span Mensaje 01
p(v-else)
span Mensaje 02
En el caso de arriba funciona, pero si lo hacemos de la siguiente manera nos dará
error:
p(v-if="showValue")
span Mensaje 01
p(v-else)
span Mensaje 02
Las directiva Vue se utilizan para manipular el dom estas comienzan con “v” que
se refiere al nombre del FromeWork, existe muchas directivas algunas para los
eventos como v-on como tambien para interactuar que son v-show, v-if, v-else, v-
else-if.
Data Binding
Data Binding implica que podamos enlazar datos desde nuestra vista a nuestro
código y desde nuestro código a nuestra vista. Esto quiere decir que cada vez que
algo se cambie en el código, va a reflejarse automáticamente en la vista, gracias al
concepto de reactividad, pero también cada vez que el usuario busca algún dato
en un campo de texto o interactue con otros sitios a través de eventos también
vamos a poder ver reflejados esos cambios en el código.
v-model: Nos permite que el usuario pueda ingresar información y que esta se
refresque automáticamente en nuestro código
v-bind: Nos permite cualquier atributo de un elemento de HTML con cualquiera de las
propiedades de Vue Model
Data Binding, implica que podamos enlazar datos desde nuestra vista a nuestro código y
desde nuestro código a nuestra vista. esto nos permite capturar la interaccion del usuario
con la UI.
La directiva v-model permite interactuar el dom con el codigo directamente
asignando datos entre si.
Computed properties
un computed property es una propiedad que cambia dinamicamente, esta puede llamarse
dentro del template pero no puede ser invocada como si se puede hacer con un método.
Las computed properties solo cambian o se reevaluan cuando cambia algo en un componente
de la aplicación, los métodos se pueden invocar cuando sea quiera, por ejemplo por medio de
un boton.
Un metodo computed son valores que se calculan a partir de varias propiedades es decir
pueden mutar una propiedad sin manipularla directamente.
Watchers
Los watchers se enlazan directamente sobre una variable del view model, por lo
cual se tienen que llamar de la misma manera.
Los Watchers nos permite ejecutar código a partir de que una propiedad de nuestro view
model cambia. A diferencia de las Computed Properties no devuelven un valor, no son
propiedades y tampoco pueden ser utilizadas en expresiones.
Los Eventos tanto como los inputs son la manera que el usuario tiene para
interactuar con nuestra aplicación.
s:
<!-- la propagación del evento 'click' será detenida -->
<a v-on:click.stop="doThis"></a>
<!-- el evento 'submit' no recargará la página -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- los modificadores pueden encadenarse -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- solo el modificador -->
<form v-on:submit.prevent></form>
<!-- usa el modo captura cuando agregas _listener_ de eventos -->
<div v-on:click.capture="doThis">...</div>
<!-- solo dispara la función controladora si event.target es este
elemento -->
<!-- quiere decir, no un elemento hijo -->
<div v-on:click.self="doThat">...</div>
<!-- el evento 'click' será disparado una vez como máximo -->
<a v-on:click.once="doThis"></a>
Los evento permiten manipular el don o darle funcionalidad a nuestro template existente el
evento se crea apartir con v-on: simplificado es @:
Los Methods se crean funciones realacionada con evento pero no necesariamente es un
evento… pueden ser funcionalidades aparte
Los Eventos tanto como los inputs son la manera que el usuario tiene para
interactuar con nuestra aplicación.
se llaman con la directiva v-on: o con un @
Evento click: v-on:click
Shorthand:@click
y la funcion debe estar en
methods: {
funcion () {
}
}
Evento click: v-on:click
Shorthand: @click
La principal ventaja para las computed properties es que son almacenadas en caché y es por
eso que su consulta se hace de manera eficaz.
Por eso es un error usar una computed property para datos que no son reactivos ya que
siempre regresaran el mismo valor a pesar de que cambien. Por ejemplo:
computed: {
getDate () {
return new Date.now()
}
}
El anterior ejemplo siempre regresará el mismo resultado ya que no tiene en sus
dependencias ninguna propiedad reactiva.
Te dejo el link de la documentación oficial para que puedas ampliar la info.
Ejercicio:
Servicios
Servicios, es un concepto es una forma de llamar a los archivos que van a tener
cierta logica de negocios.
Mi resumen creo que se explica bastante bien todo ojala a alguien le sirva
import platziMusicService from './platziMusicService'//esto no llama a un
archivo si no llama al export de platzi-music es un importe de archivo
pero diferente el .7 es por que esta al mismo nivel
const trackService = {}//objeto basio
trackService.search/*metodo search*/ = function (q/*indica query*/){
const type = 'track'//tipo de busqueda
//usamos promice, es una manera de rescribir los callback o codigo
sincronico usando objetos que complen con determinada caractersticas
principalmente tiene dos caracteristicas(metodo then, catch) ¿cuando se
va a repolver? y ¿cuando va a fallar?
//leer trae api y dice los metodos basicos
platziMusicService.get('/search'/*ejecuta el empoint serch dentro de
la api platziMusic*/,{
params:/*objeto*/ {q, type}
//{q:q, type:type} parametros que viajan dentro de la url
get.http
})
.then(res => res.tada)
/*.then((res) =>{return res.tada}) para mas de una linea se mantiene
el return y las llaves
.then(function(res){
return res.data//respuesta de la api
})*/
}
exportdefault trackService
Trae: Cliente HTTP minimalista para el navegador. Basado en Fetch API, permite que el
futuro sea a prueba, tenga una implementación limpia y soporte de transmisión entre otros
recursos.
Para los que tienen problemas con la API de Platzi Music pues esta ya no
funciona. Les dejo un listado de APIs:
Dog API => Es una API de perros y con la cual voy a reemplazar a Platzi
Music. La razón, es sencilla de utilizar y puedo subir contenido de mi perro
tambien 😄
NASA api => Conjunto de APIS de la NASA, excelente material y muy
interesante
Jikan API => API de anime bastante completa
POKEMON API => API de pokemon
En mi caso ya no utilizare TRAE sino en cambio el Fetch que incorpora JS
No olviden cambiar la direccion de la api en config.js
Les dejo el link de la documentacion de MDN de como hacer fetch a apis
Si necesitas ayuda o quieres dar aportes no olvides utilizar la sección de
comentarios
NUNCA PARES DE APRENDER
trackService.search() esta retornando indefinido por esto falla, puedes compartir tu archivo
track.js para ayudarte a encontrar el problema.
1
La API es wrapper a la API de Spotify, la cual es gratuita pero para utilizarla tenes que
autenticar los request y ver como hacer eso se iba del alcance del curso. De hecho antes al
API de Spotify tenia un comportamiento diferente y tuvimos que crear este wrapper.
Aca podes ver el codigo de la API por si te interesa.
Component
Child y local son simplemente nombres que elegimos. Se supone que todos los componentes
que re utilizas son hijos de otro componente.
En realidad la diferencia esta en como instalas un componente, esa instalacion puede ser
local o global. En el video el ChildComponent es un componente local, eso quiere decir que
lo inyectas en el main.js y lo haces accesible inmediatamente en todos los componentes.
Eso esta bueno porque es mas facil pero por otro lado estas cargando algo en lugares donde
seguramente no lo utilices.
La otra manera es la instalacion local (de ahi el LocalComponent) y lo unico que cambia es
que en lugar de registrarlo a nivel de aplicacion, lo haces a nivel de componente, es decir que
en cada componente especificas cual es son los componentes hijos que va a tener disponible.
Pero recorda que en definitiva todos los componentes (menos el principal), son child (o hijos),
ya que los insertas dentro de otros.
Los componentes pueden ser globales para estar disponibles en toda nuestra aplicacion o
ser llamados de forma local en el archivo donde va ha ser usado.
Es recomendable hacer usos de los componentes y llamarlos de forma local.
Los componentes son parte de logica por ejemplo un boton donde puede ser reutilizable
en otro view componente se pueden utilizar de forma global como tambien de manea
local, los componente globales son aquellos que pueden ser utilizando en cualquier
componente relacionado con el proyecto y los componente los locales solo pueden ser
utilizados por el componente que lo llama o importa
Creación de componentes
Hola, el uso de PUG es solo un valor agregado extra al curso. Puedes usar perfectamente
HTML para tu codigo, no hay problema con eso. Usar PUG o no, no es una buena o mala
practica. Ambas maneras son correctas. En mi opinion PUG permite un codigo mas limpio,
ordenado y rapido y suele usarse bastante en el ecosistema Vue pero no es un estandard. Por
lo cual sentite libre de usar HTML.
Hay algún orden en el que se debe escribir tanto la data, component, computed,
etc
Yo considero que debe ser:
1. Props
2. Data
3. Las funciones propias del ciclo de vida del componente (created , etc)
4. Methods
5. Computed
6. Watchers
Si no usas el export default, a la hora de hacer el import tenes que especificar el nombre
de la variable/funcion que tenes que importar.
Si directamente no usas el export no funciona porque no estas exportando el
componente/objeto, la idea de usar modulos es justamente exportar algun
codigo/funcionalidad para importar en otro archivo/modulo.
Reactividad
Ciclo de vida
El ciclo de vida o hook son evento que permiten manipular las etapas de un componentes
los hook son eventos, los hook son los siguiente beforeCreate, Create monted,
beforeUpdate, update, beforeDestroy, destroyed, cada uno de estos se utilizan para
insertar codigo segun lo que combengan.
Instancias de Vue
Se pueden utilizar todos los Hook, disponibles en la pagina de vue.js, hay esta el
diagrama de vida de un objeto.
Algunas instancias de son:
create () {
//se utiliza para obtener información, hacer peticiones http... ES
IMPORTANTE SABER QUE SE OPTIMIZA EL TIEMPO DE CARGA
},
mounted () {
//Es un paso después de create, ya que es cuando esta montado
} ```
Todos los Hook, se declaran como funciones, a nivel dela data.
Cada Hook debe de estar en el orden apropiado
track es el nombre que se definió en los props, puedes llamarlo canción, item, tema como lo
quieras llamar, solo tienes que respetar que como lo llames en los props lo vas a usar en en
template.
Al componente se le agrega una clase con Data Binding. Es decir, que la clase va mostrarse
según la condicion que se haga con los datos.
En este caso:
<pm-track v-bind:class="{'is-active': t.id === selectedTrack}"></pm-
track>
La clase is-active se va a mostrar cuando ** t**, es decir, un objeto del array track al que se le
hace un ** v-for** cuya ID sea igual al componente que se ha seleccionado (ve que se está
imprimiendo varios componentes pm-track para enlistar las canciones individualmente).
Recuerda que en la clase, al seleccionar una de las tarjetas se le asigna a la variable
selectedTrack la ID de la cancion que se está seleccionando, porque cada componente por
decirlo de alguna manera, corresponde a una cancion.
Entonces como existe el dataBinding, en el momento que selectedTrack tenga la misma ID
que uno los elementos que se ha iterado en el bucle, el componente clickeado se va a mostrar
con la clase is-active.
Utilización de Slots
Vuex permite solucionar esto de una manera mas eficiente usando los modules de vuex,
esto igualmente se ve en el curso, recomiendo que vean el codigo y lo analizen pero yo
no lo haria paso a paso porque justo para esto se desarrollo Vuex el cual es creado por el
equipo de desarrollo de Vue
Event Bus y Plugins permite la comunicacion entre componentes que no tienes relacion
de padre/hijo sino q son componentes llamos desde distintos puntos de la aplicacion.
</template>
<script>
exportdefault {
props: {
isSuccess: {
type: Boolean,
required: true
}
}
}
</script>
Características de vue-router:
Permite crear rutas anidadas
Es modular
Permite crear rutas con parámetros
Permite aplicar transiciones a las rutas
Permite trabajar con el modo historial HTML5
Vuye route es un plugin o inrutador que premite aplicar SPA (single page application) con
el objetivo de renderizar y mejor el rendimiento de la aplicacion tambien permite realizar
rutas annidadas, es modular es decir permite que cada componente tanga s propia ruta
tambien permite que la ruta utilize parametro como tambien brindar seguridad segun los
roles que correspondan, y por ultimo permite agregarle efectos visuales de transición
Es muy importante seguir las practicas de accesibilidad e incluir a todos los posibles
usuarios.
A veces para poder mostrar los ejemplos concretos es mas practico omitir cosas por temas de
practicidad. Pero es realmente muy bueno que lo aclares.
El componente router-link tambien lo usamos cuando vemos la parte del menu. En este
caso la idea era mostrar como podemos navegar las rutas usando código, es por eso que lo
hacemos con este patron.
Modifiers
Modificadores de eventos
Es una necesidad muy común llamar a event.preventDefault() o event.stopPropagation()
dentro de los controladores de eventos. Aunque podemos hacer esto fácilmente dentro de
los métodos, sería mejor si los métodos fueran puramente sobre lógica de datos en lugar
de tener que lidiar con los detalles del evento DOM.
Para solucionar este problema, Vue proporciona modificadores de eventos para v-on.
Recuerde que los modificadores son directivas postfijos marcados por un punto
Modifiers
Permite utilizar los directiva de cada evento por ejemplo preventDefault()
etc https://sodocumentation.net/es/vue-js/topic/8612/modificadores
Filtros
Los filtros permite filtrar texto comun y convertirlo en otro segun los criterio que se le
asignen estos mismos pueden declararse como una exprecio en un v-bind segun la
funcionalidad lo requiera la sintaxi tiene que ser de la siguiente forma “{{ OldText | Filter }}”
la sintaxi es predeterminada con un simbolo “pipe” pueden ser cleado de manera local
desde un componente o de manera global.
https://es.vuejs.org/v2/guide/filters.html
Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto
común. Se puede utilizar filtros en dos lugares: interpolaciones mustache y
expresiones v-bind. Los filtros se deben agregar al final de la expresión de
JavaScript, denotados por símbolo “pipe”:
<!-- en mustaches -->
{{ message | capitalize }}
Directivas Personalizadas
if (!printSection) {
printSection = document.createElement('div');
printSection.id = 'printSection';
document.body.appendChild(printSection);
}
el.addEventListener('click', () => {
var elemToPrint = document.getElementById(binding.value);
if (elemToPrint) {
printSection.innerHTML = '';
printElement(elemToPrint);
}
});
functionprintElement( elem ){
let domClone = elem.cloneNode(true);
printSection.appendChild(domClone);
window.print();
}
}
exportdefault print
Mixins
Interesante esto de los mixin, con base en una comparativa los mixin son como
contenedores de código para compartir entre componentes.
Los mixins son una forma flexible de distribuir funcionalidades reutilizables para
componentes de Vue. Un objeto mixin puede contener cualquier opción de
componente. Cuando un componente usa un mixin, todas las opciones en el
mixins se “mezclan” en las propias opciones del componente.
en definitiva una funcionalidad excelente q nos permite poder reusar codigo de
forma correcta.
Mi template de Search.vue
.container.results
// .columns.is-multiline
transition-group(name="fade", tag="div" class="columns is-
multiline")
.column.is-one-quarter(v-for="t in tracks", :key="t.id")
pm-track(:track="t",
:class="{ 'is-active': t.id === selectedTrack }",
v-blur="t.preview_url",
@select="setSelectedTrack")
pTodoslosderechosreservados
En la sección de metodos del componente Search.vue
methods: {
search () {
//console.log(this.searchQuery)
//this.tracks = tracks
if (this.searchQuery === '') { return }
this.isLoading = true
this.tracks = []
trackService.search(this.searchQuery)
.then(res => {
console.log(res)
// Si el total de resultados es 0, entonces se establece en
true y se mostraria el mensaje de notificacon
this.showNotification = res.tracks.total === 0
// Ver en consola el cuerpo del res
//this.tracks = []
this.tracks = res.tracks.items
this.isLoading = false
})
},
setSelectedTrack (id) {
this.selectedTrack = id
}
}
MIs estilos
.fade-enter-active, .fade-leave-active {
transform: scale(1);
transition: all .8s linear;
}
.fade-enter, .fade-leave-to {
transform: scale(0);
}
Vue ofrece una variedad de maneras para aplicar efectos de transición cuando los
elementos son insertados, actualizados o eliminados del DOM. Esto incluye
herramientas para:
aplicar clases para transiciones y animaciones CSS automáticamente
integrar librerías externas de animación CSS, por ejemplo Animate.css
usar JavaScript para manipular directamente el DOM durante hooks de
transición
integrar librerías externas de animación por JavaScript, como Velocity.js
State
el store es para almacenar informacion que se comparte entre componentes. Los mixins son
para evitar duplicar funcionalidad.
De hecho podrias crear un mixin donde internamente se use el store o cualquiera de las
particularidades de Vuex y luego aplicar el mixin a los componentes.
npm i -S vuex
Vuex utiliza un solo árbol de estado, es decir, este único objeto contiene todo el
estado de su nivel de aplicación y sirve como la “fuente única de verdad”. Esto
también significa que generalmente tendrá una sola tienda para cada aplicación.
Un solo árbol de estado facilita la localización de una parte específica del estado y
nos permite tomar fácilmente instantáneas del estado actual de la aplicación con
fines de depuración.
npm i -D babel-preset-stage-2
Mutations
Getters
Tenia entendido que para acceder a las propiedades del state es recomendable
siempre usar getters.
Los getters, Una cosa es cómo almaceno los datos en mi store global y otra
diferente qué datos me son útiles dentro de un componente. Por ejemplo, puede
que dentro de mi store se almacenen un numero considerable de propiedades,
pero que un componente solo necesite aquellos con una caracteristica unica.
Actions
Si, uno de los objetivos de los estados es compartir información entre componentes y poder
dispara eventos cuando algo cambia en el estado, puedes tener información almacenada en el
estado o tenerla también en local storage.
2
si tus propiedades estan en el state y tus llamadas ajax van a setear valores sobre
ese state, creo que es recomendable delegar eso a las actions. Pero no siempre vas a
tener esa necesidad ya que tampoco es bueno sobrecargar el state con cosas que no
necesitas. Creo que en general vas a tener esquemas mixtos donde en algunos casos tus
peticiones ocurren dentro de actions en el store y en otros casos tenes componentes
interactuando directamente con los servicios (sin store en el medio).
Hay otro caso dentro de la aplicación en el que lo podemos usar para tener mejor
rendimiento: cuando se hace una búsqueda y se hace clic para ver el detalle de
una canción (clic directamente en 🌎), el objeto track o está vacío o tiene
información de una canción anterior, por lo cual el componente TrackDetail hará
el llamado a la API.
Lo que se puede hacer es almacenar la información del nuevo track antes de ir a
la vista de detalle desde el componente Track cambiando un poco el
método goToTrack, así:
1. El parámetro de la función goToTrack no es sólo el id, sino el objeto entero
button.level-item.button.is-warning(@click="goToTrack(track)")
span.icon.is-small 🌎
1. Se hace un commit al mutation setTrack para almacenar el valor sin tener
que llamar a la API
exportdefault {
methods: {
goToTrack (track) {
this.$store.commit('setTrack', track)
this.$router.push({ name: 'track', params: { id:
track.id } })
}
}
}
Nuxt.js
Nuxt puede o no reemplazar express (en realidad Nuxt usa express internamente). Eso
depende de que tipo de app quieras hacer, si queres una app monolitica (servidor + cliente) o
una app cliente (con SSR pero sin logica en el server).
3
Nuxt te ayuda a hacer render de las paginas y componentes de react.
Nuxt y express se complementan.
https://github.com/nuxt/nuxt.js#using-nuxtjs-programmatically
Para trabajar con Vue hay un framework de diseño MUY bueno llamado Vuetifyjs
(https://vuetifyjs.com/vuetify/quick-start) y tiene un template para Nuxt.
Qué es now
Puedes hacer deploy en cualquier vps que quieras, solo tienes que instalar lo necesario como
node, un servidor http como nginx o apache y configurar todo.
5
Si estas usando vue cli el comando que debes ejecutar para transpilar el codigo seria, “npm
run build” si es tu directorio de perfil de github con esto basta, si vas a usar un hosting de
terceros Digital Ocean por ejemplo con esto basta, si vas a usar un repositorio de github que
no sea el de tu perfil, debes crear un archivo “vue.config.js” este debe contener un public path
asi:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/my-project/'
: '/'
}
Recuerda que el nombre de tu repo debe ir entre los slash y no debe faltar ninguno de los dos
slash, si no quieres usar la variable de node para el ambiente tambien puedes agregarlo asi:
module.exports = {
publicPath: '/my-project/'
}
despues ejecutar el comando:
npm run build
Ahora podras acceder a un nuevo directorio “dist” ahi ya solo ingresas con la terminal y
ejecutas tus comandos de git:
cd dist
git init
git add .
git commit -m "wip"
git fetch origin .... (mirar tu repo)
git push -u origin master
Por ultimo ya solo debes ir a tu repositorio y la pestana “settings” y hasta abajo agregar donde
dice github pages y seleccionar la rama en la que trabajaste que por defecto es “master”
como puedo testear un componente de manera unitaria o e2e, donde el mismo hace una
llamada a una api? el tema esta en la llamada a la api, eso como se suele manejar, se
hace un fake o algo por el estilo?
Hola, lo que te recomiendo es hacer un mock (una simulacion de funcionalidad) de la llamada
a la API. Yo suelo utilizar una lbreria llamada Sinon.js que te permite resolver ese tipo de
cosas. Te recomiendo que revises el metodo stub de esa libreria.
Por otro lado analiza bien si necesitas testear el componente o simplemente testear el servicio
que contenga la llamada a la API. En ese caso el testeo seria mas sencillo. Te dejo un
ejemplo que tiene un caso de uso para testear un metodo de un servicio:
describe('getTrackById()', () => {
it('should return a given track', () => {
const track = { id: 1, name: 'Track 1'}
return trackService.getById(track._id)
.then((res) => {
assert.equal(res.name, track.name)
sinon.assert.calledOnce(trackService.getById)
sinon.assert.calledWith(trackService.getById, requestUrl)
trackService.getById.restore()
})
})
})