Preparando nuestro entorno para un prototipo

Clase 5 de 34 • Curso Avanzado de Vue.js 2 y Firebase por Bedu

Resumen

Antes de crear nuestro primer componente con createElement debemos instalar el plugin o dependencia para generar prototipos pequeños y mostrarlos en el navegador. Un prototipo individual por cada componente de Vue.

Esteban Ramos Fernández

student•

NPM npm install -g @vue/cli-service-global

YARN yarn global add @vue/cli-service-global

Alexander Valencia

student•

gracias

Carlos Eduardo Gomez García

teacher•

Increíble, no sabía que podía servidor un único componente usando vue serve, es bueno saberlo

Esteban Ramos Fernández

student•

Es compatible bajo el uso de sintaxis pug (antiguamente llamado jade) ?

Esteban Ramos Fernández

student•

Comparto la liga usando jsx con pug en vue

https://bluewings.github.io/pug-as-jsx-loader/ https://github.com/pugjs/babel-plugin-transform-react-pug

Para quienes usan React https://bluewings.github.io/pug-as-jsx-loader/

Cristhian Daza

student•

App.vue

<template>
    <div id="app">
        <button >Toggle Modal</button>
    </div>
</template>

<script>
export default {
    name: 'App'
}
</script>

<style>
body {
    background: #cecece;
}

.modal {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    width: 250px;
    background: #fff;
    padding: 15px;    
}

.modal > .message {
    margin: 0;
    margin-bottom: 10px;
}
</style>

Jorge Eliecer Rangel Jimenez

student•

npm install -g @vue/cli-service-global

Juan Castro

teacher•

:sweat_smile: ¿Existe algún plugin así de React/Preact para generar prototipos individuales de cada componente? :thinking: Me suena StoryBook :art:.

jonathan sanchez

student•

para la nueva version de vue-clic 4.1.2 el comando de instalacion es:

npm install -g @vue/cli @vue/cli-service-global

Jhonatan Ferney Ospina

student•

Gracias

Juan Camilo Zapata Arbelaez

student•

Para los que estan usando la v5 del CLI en la documentacion recomiendan usar Vite para hacer el Instant Prototyping: Pueden iniciar el proyecto ejecutando el comando "npm init vite"

Alexis Bustamante

student•

NPM npm install -g @vue/cli-service-global

Sebastián Buitrago

student•

Les recomiendo mucho este plugin que les ayudara con la sintaxis de vue https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

Gonzalo Cofré

student•

Al ejecutar vue serve App.vue me devuelve este error:

Command vue serve requires a global addon to be installed. Please run yarn global add @vue/cli-service-global and try again.

¿alguna idea?

Fernanda Aragon

student•

Parece que no has instalado globalmente el CLI de Vue, para esto corre el comando npm install -g @vue/cli.

Xavier Alexandro Basir Jeffrey

student•

tengo este mismo problema y no lo he podido solucionar, alguna otra idea?

Alejandro González Reyes

student•

Haber si entiendo, cada archivo .vue es como un proyecto independiente con el comando vue serve

Diego Forero

Team Platzi•

No. App.vue es el archivo de entrada, cada componente o contenedor lo creas con extensión .vue y estos son transpilados (pasado a js que entiende el navegador) pero el punto de entrada sigue siendo App.vue. Más adelante se explica esto con más detalle.

Jesús Miguel Quinto Teran

student•

Alguno conoce como cambiar e host y port en Vue serve, según veo las opciones disponibles son muy pocas:

Usage: serve [options] [entry]

serve a .js or .vue file in development mode with zero config


Options:

  -o, --open  Open browser
  -c, --copy  Copy local url to clipboard
  -h, --help  output usage information

Joaquin García Santiago

student•

Debes crear un archivo vue.config.js

module.exports = {
  devServer: {
    port: 3080,
  },
}

para más información puedes consultar este enlace: VUE devServer

Emiliano Herber

student•

Para el que le da el siguiente error: (node:7897) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'version' of undefined at module.exports (/usr/lib/node_modules/@vue/cli-service-global/node_modules/@vue/cli-plugin-eslint/index.js:18:27) ... [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Instalar como dependencia del proyecto: - npm install eslint-plugin-vue - npm install babel-eslint

Xavier Alexandro Basir Jeffrey

student•

Estaba muy ancioso por hacer este curso pero al ejercutar el vue server me da este error

Command vue serve requires a global addon to be installed. Please run npm install -g @vue/cli-service-global and try again.

Corro el comando que dice el mensaje pero no resuelve el problema. He visto recomendaciones a este error pero ninguna me ha servido.

Me di cuenta que si corro el comando en mi carpeta de NodeJS ahí si funciona, me da a entender que tengo problemas con la instalación global y ya no se que hacer para solventarlo.

Desinstale e Instale nuevamente todo, Node, Vue, Vue-cli y sigo con el mismo problema. Alguna idea? :(

Juan Castro

teacher•

¡Hola! Puedes seguir los pasos alternativos de la documentación:

yarn global add @vue/cli-service-global

O también con NPX:

npx vue-cli-service
npx vue-cli-service serve

Jansenio Gonzales Venegas

student•

tengo este problem@

C:\Users\jangove\AppData\Roaming\npm-cache_logs\2021-01-17T16_23_50_785Z-debug.log

Eduardo Pech

student•

A mi me saiio este error al ejecutar vue serve App.vue.

Module Error (from /Users/eduardopech/.config/yarn/global/node_modules/v
ue-loader/lib/index.js):

Vue packages version mismatch:

Ya que anteriormente tenia instalado vue de manera global. Y encontre la solución: en el caso de /Users/UsuariodeTuPC/.config/yarn/global/ ejecutar los siguientes comando en orden. y sustituye el nombre de tu pc que marca el error.

cd /Users/eduardopech/.config/yarn/global/
rm -rf node_modules/
rm yarn.lock 
yarn

Y con esto desaparece el error. Cualquier duda estoy a sus ordenes.

David Edson González Carrillo

student•

Ayuda!

Al correr el comando vue serve me arroja el siguiente error.

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.