Preparando nuestro entorno para un prototipo

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

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

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

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

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>

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

😅 ¿Existe algún plugin así de React/Preact para generar prototipos individuales de cada componente?
🤔 Me suena StoryBook 🎨.

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

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

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”

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

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

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?

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

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

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

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? 😦

tengo este problem@

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

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.

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.