Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Clase 26 de 38 • Curso Básico de Vue.js 2

Resumen

¿Cómo generar un proyecto de cero con una CLI?

Generar un proyecto desde cero puede parecer una tarea titánica, pero con las herramientas correctas, este proceso se vuelve intuitivo y simplificado. Las interfaces de línea de comandos (CLI) nos ofrecen comandos eficaces para empezar y manejar nuestros proyectos de desarrollo. Tanto si estás iniciando en el desarrollo como si ya eres un experto, saber cómo utilizar estas herramientas es crucial.

¿Cuáles son los comandos básicos del CLI?

El CLI nos proporciona una serie de comandos que simplifican la creación y gestión de aplicaciones. Entre ellos:

Crear y editar proyectos: Utiliza comandos como create y edit para iniciar y modificar tu aplicación profesional desde cero.
Servir aplicaciones en modo local: Con npm run serve, puedes ejecutar tu proyecto localmente y ver cómo funciona en tiempo real.

¿Cómo manejar errores y generar producción?

Una parte importante del desarrollo es asegurar que el código funcione sin errores y esté optimizado para producción. Gracias al CLI:

Detección de errores: Usa npm run lint para detectar y corregir fallas en el código JavaScript.
Generar versión de producción: Con el comando npm run build, transforma tu proyecto a un formato comprendido por los navegadores, utilizando herramientas como Webpack. Esto asegura que el código sea eficiente y rápido.

¿Cómo se genera un servidor web local?

Tener un servidor local es imprescindible para verificar que todo funcione correctamente antes de lanzar un proyecto a producción. Aquí es donde el comando serve se vuelve fundamental:

Instalación y ejecución: Usa npm install -g serve para instalar el comando globalmente. A continuación, ejecuta serve para empezar a servir el directorio dist.

Este servidor te permite cargar y verificar que el proyecto funcione correctamente en diversos entornos antes de su implementación final.

¿Qué beneficios ofrece una interfaz gráfica de usuario (GUI) del CLI?

Para aquellos que prefieren una experiencia visual más intuitiva, una GUI del CLI puede ser la herramienta ideal. Esta interfaz mejora significativamente la interacción y gestión de proyectos.

¿Cómo utilizar la GUI del CLI para gestionar proyectos?

Importar proyectos: A través de la GUI, puedes importar tus proyectos directamente, facilitando su gestión sin recurrir a comandos de terminal complicados.
Gestión avanzada: Puedes ver y modificar las dependencias, administrar plugins y ajustar la configuración del proyecto. Además, esta interfaz permite manejar tareas específicas de forma visual.

¿Qué son los presets del CLI?

Los presets del CLI son configuraciones que pueden guardarse para ser reutilizadas en futuros proyectos. Cuando creas un nuevo proyecto, puedes seleccionar un preset guardado para aplicar configuraciones previas de manera rápida y eficiente. Esta función es especialmente útil para desarrolladores que trabajan en múltiples proyectos y desean mantener consistencias en sus configuraciones.

Con todas estas herramientas, cada desarrollador puede optimizar su flujo de trabajo, asegurando que los proyectos estén bien estructurados y funcionen según lo previsto. Así que, ¡anímate a explorar y utiliza estas potentes funcionalidades para llevar tus habilidades al siguiente nivel!

David Alejandro Abreu Abreu

student•

Por si alguien se hizo la misma pregunta que yo: Errores de Linteo

Un linter revisa tu código buscando errores y problemas de sintaxis, se asegura también que el código que escribes siga un estilo, esto ayuda a que todo el código escrito en un proyecto se vea como si hubiera sido escrito por la misma persona, y eso lo hace mas legible y mantenible.

Eduardo Rafael Romero Bernal

student•

Tengo entendido que esLint revisa nuestro código siguiendo una guía de estilos estándar, alg así como esto: https://github.com/airbnb/javascript

Francisco J. López

student•

Funcionalidades, UI y comandos básicos

npm run lint. Detectar errores de linteo

npm run build. Generar la aplicación en modo producción. Genera una carpeta dist.

npm i -g serve. Permite generar un servidor web local:

serve -s dist. Levanta un localhost.

vue ui. Genera una aplicación web local, que mediante una interfaz de usuario permite gestionar los proyectos de Vue. preset. A medida que se van creando proyectos con determinada configuración, el cli de vue permite guardar esa configuración para más adelante poder utilizarla al momento de crear un proyecto.

David Behar

student•

npm i -g serve: Instala de manera global el comando serve, mismo que sirve para servir código html y que se muestre en un servidro local serve -s dist: sirve el código dentro de la carpeta dist en un servidor local, lo que significa que abre un puerto con todos los archivos estáticos en un host creado en el mismo computador (localhost)

Jimmy Buriticá Londoño

student•

Muy buen resumen. gracias

William Condori

student•

Comandos básicos

Para detectar errores de linteo podemos ejecutar el siguiente comando

npm run lint

Si queremos generar la version de produccion de nuestro proyecto ejecutamos el siguiente codigo

npm run build #Esto tendra como salida una carpeta `dist` la cual contendra aquellos archivo que entiende el navegador

Para probar nuestro paquete de producción que se genero (dist) podemos hacerlo atravez de un servidor interno, para ello tenemos que instalar lo siguiente:

npm i -g serve #Este nos permite generar un servidor web local

Ya que tengamos nuestro servidor instalado, para habilitarlo ejecutamos el siguiente comando:

server -s dist

ahí tenemos los distintos URL por donde podemos ver nuestro proyecto en el navegador

sirve el código dentro de la carpeta dist en un servidor local, lo que significa que abre un puerto con todos los archivos estáticos en un host creado en el mismo computador (localhost) (referencia: David Behar)

Hay otra manera para poder interactuar con Vue CLI aparte de la consola, esto es atreves de un modo grafico el cual podemos ver en el navegador, para poder acceder a este tenemos que ejecutar el siguiente comando:

vue ui

Esto nos habilitará un puerto en nuestra computadora por el cual podremos administrar los plugins, dependencias, etc.

Andrés Felipe Lopez gomez

student•

Excelente resumen

Jhonatan Hurtado Barbosa

student•

Gran aporte.

Jhonatan Ferney Ospina

student•

Nacho explica muy bien

Nacho Anaya

teacher•

Muchas gracias 😁

Abner Batz

student•

npm run lint = genera una versión de desarrollo npm run build = genera una versión para producción npm i -g serve = genera un servidor web en nuestra pc, revisa que la carpeta dist tenga el código correcto. vue ui = genera una app web local con una interfaz de usuario para gestionar nuestros proyectos desarrollados en vue.

Juan Esteban Galvis

student•

Dejo mis apuntes y digamos pasos que hicimos:

# Instalación Vue JS CLI y estructura básica
npm install -g @vue/cli
vue create myapp

# Servidor desarrollo
npm run serve
# Validar errores
npm run lint
# Compilar ./dist -> Distrubicción
npm run build

# Instalar servidor producción (Primero hacer build)
npm install -g serve
serve -s dist

# Vue UI (Interfaz para gestionar dependencias
vue ui

Hernán Arica

student•

perfecto nacho!! tuve que verlo 2 veces para entenderlo bien pero lo logre! explicas re bien.

Nacho Anaya

teacher•

Muchas gracias Hernan!

Adrián Castillo

student•

Existe diferencias en el rendimiento al utilizar Vue de la manera tradicional y utilizarlo con el empaquetado que generamos con el VUE CLI?

Arturo Casas Quiroga

student•

El Vue CLI simplifica todos los componentes en un sólo archivo. Esto ayuda demasiado al tiempo de carga de la página.

jonathan sanchez

student•

Wow ya me estaba preguntando como se llevaria el sitio web a produccion y aqui se explica muy bien con el uso del comando de build. y me parece increible el vue ui, pues ofrece muchas herramientas de gestion desde una interfas intuitiva.

Camilo Bellon

student•

APUNTES MANEJO PROFESIONAL VUE JS:

Descargo e instalo la herramienta node desde la web: node .org

Instalo las herramientas de desarrollo de Vue segun el navegador que estemos usando. en este caso usaremos CHROME: las vue dev tools se encuentran en el repositorio original de vue. es una extension que una vez instalada, me permite inspeccionar desde una pestaña propia de vue en las herramientas del desarrollador

El vue-cli (es decir, la “interfaz de línea de comandos Vue”) es una herramienta creada por el equipo Vue.js para ayudar a facilitar el rápido desarrollo de las aplicaciones Vue. Si bien puede usar Vue.js en el navegador directamente, la mayoría de las aplicaciones frontales usan Node.js para las herramientas de compilación. Se descarga desde la web de vue cli y se instala con comando en la terminal.

nuevo proyecto: una vez instalada la herramienta, ejecutamos vue create nombre-del-proyecto. configuro el proyecto segun las opciones que voy a emplear.

cd nombre-del-proyecto npm run serve (para correr mi aplicacion de forma local, es una expresion alojada en el package.json)

abro en el navegador el localhost: en el puerto que este corriendo mi aplicacion vue. abro la carpeta del proyecto en vs code.

SINGLE FILES COMPONENTS

Es una herramienta que nos ofrece el framework para poder trabajar con la logica, el estilo y el html dentro de un mismo componente. El CLI va a generar un codigo compatible con el navegador para poder utilizar nuestra aplicacion en produccion, pero tambien va a alojar los modulos y dependencias que utilizamos para llevar a cabo el desarrollo.

para detectar errores de lint: npm run lint (es una expresion alojada en el package.json)

para generar nuestro codigo en produccion: npm run build (es una expresion alojada en el package.json) Este comando genera archivos .js compatibles con el navegador. todo empaquetado por el web pack una vez ejecutado, se generara la carpeta dist con todos los archivos empaquetados de nuestro codigo. para verificar estos archivos podemos ejecutar en un servidor local asi:

npm i -g serve (para instalar el server) serve -s dist

para correr la USER INTERFACE. Este comando me va a mostrar una aplicacion local para gestionar mis proyectos.

vue ui

aqui puedo importar mis archivos y gestionar dependencias, plugins y diferentes cosas de mi proyecto.

Ana Lopez Lopez

student•

Hola! Estoy teniendo un error al usar el comando npm i -g serve a alguien le paso?

npm ERR! code ETARGET
npm ERR! notarget No matching version found for serve-handler@6.1.2.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'serve'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/paula/.npm/_logs/2020-05-01T23_29_31_960Z-debug.log```

aSXasx SAXasx

student•

Hola!

Si, me pasó pero fué por problemas de permisos. Entonces coloqué el mismo comando precedido de la palabre "sudo". Así:

Espero te funcione

aSXasx SAXasx

student•

Jose L. Figueroa

student•

Además de poder servir nuestra aplicación en modo local con:

npm run serve

También podemos correr el comando Lint, utiliza internamente el CLI para detectar errores de linteo,:

npm run lint

O el comando build, para generar nuestra aplicación en modo de producción:

npm run build

Internamente este comando está utilizando webpack para generar los archivos llamados bundlers, generando así código JS ente doble por el browser, a partir de nuestra configuración local, de nuestros archivos vue, assets, y css’s.

Para probar el código correcto para producción se ejecuta el código:

npm i -g serve

Así puedo correr el comando serve que se acaba de instalar y servir el directorio distribuidor con los archivos generados para el ambiente de producción:

Serve -s dist

Para correr la Vue UI genera una aplicación web local que me va a permitir gestionar todos los proyectos locales en Vue, permite gestionar dependencias, así como instalación de nuevas dependencias, plugins, así como la configuración del CLI o ESLint para el proyecto en específico, así como en la parte de tareas, las diferentes tareas que se definieron en el packageJSON.

Juan Pablo Cely W.

student•

el lint tiene algun template o config base, para definir la identacion, los espacios entre palabras, donde debe cerrar los corchetes?

Diego Forero

Team Platzi•

Si, por ejemplo para eslint se usa un archivo .eslint.rc que puedes configurar que va a lanzar como error, que como warning o que va a ignorar. https://eslint.org/docs/user-guide/configuring

Maximo Martinez Soria

student•

acá podés ver las reglas por default: https://vuejs.github.io/eslint-plugin-vue/rules/

Carlos Eduardo Gomez García

teacher•

Me gustó Vue UI xD Lo único malo es que te puedes mal acostumbrar, la terminal siempre es más rápida, es un gran dileme el usar Vue CLI o Vue UI D:

Alejandro Vega Meneses

student•

Si pienso igual, por mi parte me queda más cómodo usar la terminal

Andrés Felipe Rodríguez Rincón

student•

Se que el curso es de Vue, pero me preguntaba si hay una herramienta similar a la que se despliega con 'vue ui' para React y Angular.

Franz Pool Nuñez Villazana

student•

Cuando corro el comando

vue ui

me sale en siguiente error

$ vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: spawn cmd.exe ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
    at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
    at onErrorNT (internal/child_process.js:415:16)
    at process._tickCallback (internal/process/next_tick.js:63:19)```

Rafael Alejandro Belalcázar Burbano

student•

Creo que eso no es un error. Lo que tienes que hacer es ir a tu navegador y colocar esa dirección, también puede funcionar dar ctrl+click sobre la dirección.

Emmanuel Rodríguez

student•

En su momento intenté poner el código en mi servidor pero salió este resultado, e incluso ahora cuando trato de observar con Live server en mi laptop

¿Me pueden ayudar? Literalmente ejecuté

npm run build

David Fernando Aguirre Rodriguez

student•

Agregar <base href="/"> en el header antes de vincular todos los archivos CSS

cristian stiven velasquez garzon

student•

cuando ya creamos nuestra aplicación de producción se que se crea una carpeta dist en el cual me preguntaba que pasamos a nuestro servidor de producción toda la carpeta general o que se pasa o que estructura pasamos ??

quedo atento a sus comentarios gracias

Edmundo Salamanca Villa

student•

De lo que tengo entendido si, solo pasas el dist, por lo que justamente el dist se crea a partir de (lo que yo conozco) la compilación por parte del comando build, y esa carpeta de lo que tengo entendido (Para el archivo js sobre todo) ya tiene el código escrito en js normal que entiende cualquier navegador, al igual que cuando usas por ejemplo sass, y te exporta todo a un css final con todo lo que necesita tu página. Sería interesante leer a alguien más sobre el tema que sepa un poco más a profundidad el tema.

Roberto Shirásago Domínguez

student•

¿Cuales son los errores de Linteo?

Enrique Devars

teacher•

Son aquellos que te muestran que parte de tu código está mal o pueden tener malas prácticas pero no afecta a la ejecución del proyecto.

Emerson Cedeño

student•

¿cómo es que se configura el VS Code para que al guardar se corrija el linteo / se formatee el código (indentación) inmediatamanete?

Manuel Durán

student•

Optimizing your Editor Note: Since the release of this lesson, Vetur has updated how it handles disabling its built-in snippets. For more context, read here.

In this tutorial, we’ll be setting up the free Visual Studio Code editor for an optimized development environment. While there are many options for code editors, and you may already have a favorite one, I’ll be using VS Code during this course. The concepts covered in this lesson may be transferable to other code editors, but if you’d like to follow along exactly, you’ll start by making sure you have VS Code installed.

What are we going to learn? We’re going to be learning how to:

Get syntax highlighting in our .vue files Utilize code snippets for a faster workflow Configure our editor to auto-format our code And explore other helpful extensions that’ll improve our development experience Installing Vetur There are several features that make VS Code a great environment for Vue development, including Vetur, a plugin designed by Pine Wu, a core member of the Vue.js team.

Here in VS Code, if we open up a .vue file, such as this About.vue file, we see all of this gray code. That’s because VS Code won’t automatically highlight the syntax in .vue files.

Vetur can fix this for us, and give us other features designed to improve the developer experience.

So let’s install it now. Open the extensions store.

Then search for “Vetur”, select it in the search results, and click Install. Then click Reload.

Vetur’s Features Now that Vetur is installed, let’s take a look at its features.

Syntax Highlighting By typing command + P, and typing the name of a .vue file, we can open up the About.vue file. As you can see, now our code is getting proper syntax highlighting. Awesome - no more gray code.

Checking the Home.vue file, we can see that our JavaScript is also being highlighted correctly.

Snippets Another feature Vetur comes packaged with his code snippets. These are time-saving “snippets” of code that allow you to quickly create commonly used chunks of code.

Let’s create a new component to see this in action. We’ll name is EventCard.vue. Now, if we type the word “vue” into a .vue file and hit ENTER, this will auto-fill that file with the skeleton, or scaffold, of a single file .vue component.

Emmet Vetur also comes packaged with Emmet. This is a popular tool that allows you to use shortcuts to build out your code.

For example, we can type h1 and hit enter, and this will create an opening and closing h1 element.

When we type something more complex, such as div>ul>li, it will produce:

&lt;div&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

If Emmet doesn’t appear to be working for you, you can add this to your User Settings:

&quot;emmet.includeLanguages&quot;: {
      &quot;vue&quot;: &quot;html&quot;
  },

To learn more about how Emmet can speed up your development, go here.

Installing ESLint & Prettier Now, we need to make sure we have ESLint and Prettier installed. In the extensions store, we’ll do a search for ESLint, then go ahead and install it. And we’ll do the same for Prettier. Once it’s installed, we’ll hit reload to reload VS Code.

Configuring ESLint Now that these are installed, we need to add a bit of extra configuration to them.

When we created our project from the terminal, we chose to create it with dedicated config files, which gave us this .eslintrc.js file, where we can configure ESLint for this project. Had we not chosen dedicated files, we would find the ESLint configurations within our package.json.

So, in our .eslintrc.js file, we’ll add:

'plugin:prettier/recommended'

This will enable Prettier support in ESLint with the default settings.

So our file now looks like this:

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/essential',
    'plugin:prettier/recommended', // we added this line
    '@vue/prettier'
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

Configuring Prettier We also have the option to create a Prettier configuration file, to add some special settings according to our personal style or our team’s preferences.

We’ll create it here and name it .prettierrc.js.

And inside, we’ll type:

module.exports = {
    singleQuote: true,
    semi: false
}

This will convert double quotes to single quotes, and make sure that semicolons are not automatically inserted.

User Settings In order to further optimize VS Code for a great development experience, we’ll add some configurations to our User Settings. To access User Settings, click on Code in the top navigational bar, then Preferences, then Settings. This will bring up a User Settings window where you can add settings in json.

First, we want to add:

&quot;vetur.validation.template&quot;: false

This will turn off Vetur’s linting feature. We’ll be relying instead on ESLint + Prettier.

Now we want to tell ESLint what languages we want it to validate (vue, html, and javascript) and set autoFix to true on each:

&quot;eslint.validate&quot;: [
    {
        &quot;language&quot;: &quot;vue&quot;,
        &quot;autoFix&quot;: true
    },
    {
        &quot;language&quot;: &quot;html&quot;,
        &quot;autoFix&quot;: true
    },
    {
        &quot;language&quot;: &quot;javascript&quot;,
        &quot;autoFix&quot;: true
    }
],

Then for good measure, we’ll tell ESLint to autoFixOnSave.

&quot;eslint.autoFixOnSave&quot;: true,

And tell our editor itself to formatOnSave.

&quot;editor.formatOnSave&quot;: true,

Testing it out To test that this is working, we’ll add a data property to our EventCard component here, and add a quote: “I want to be single” then we’ll throw in a semicolon here, too. When we hit save, our quotes are converted into single quotes and the semicolon is removed. Awesome - it’s working.

Additional Tools Now let’s take a look at some additional tools that can help speed up your development.

Copy Relative Path Copy Relative Path is an extension that allows you to copy the location a file lives, based on its relation to the directory to which it is linking.

Let’s search for it, install it, then see it in action.

In our Home.vue file, we see there’s a relative path here already, where we’re importing the HelloWorld component.

In order to get the relative path of a file we want to import, we’d right click on the file, then select Copy Relative Path. Now, when we paste what was copied, we see we have the accurate relative path. Notice this src. The comment here lets us know that because of the way our project is set up, we can use @ instead.

Integrated Terminal A convenient built-in feature of the VS Code editor is its integrated terminal, which you can use instead of switching over to your separate terminal. You can open it, with the keyboard shortcut: `ctrl + ``

More Snippets If you’re interested in installing some additional convenient code snippets, you can download a full suite of Vue VSCode Snippets, created by Core Vue Team Member Sarah Drasner.

Let’s search for the extension with her name, sarah.drasner. There they are. Now we can install and reload.

Let’s take a look at them in action.

If we type vif on an element in our template, that’ll give us a v-if statement, and typing von will give us a full event handler. Instead of manually typing out a data property, we can simply type vdata which will create one for us. We can do the same thing to add props with vprops. We can even use it to create the code to quickly import a libary, with vimport-lib. As you can see, these are very helpful and time-saving snippets.

Please note that if you’re using this Snippets extension, it is recommended to add a line to your User Settings:

vetur.completion.useScaffoldSnippets should be false

This will make sure these snippets aren’t conflicting with Vetur’s.

Color Themes Finally, if you’re wondering how to change your theme in VS Code, or if you’re wondering which one I’m using here, you can go to Code > Preferences > Color Theme.

As you can see, I’m using FlatUI Dark. You can change your theme color to any of these options here, or you can search for other themes in the extensions store.

If you don’t see one you want, you can also head to the Visual Studio Marketplace online. Here, you can preview tons of different plugins and themes, such as Night Owl by our friend Sarah Drasner. You can install it directly from the browser then find it in your Color Theme Preferences.