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

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:46

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

Curso Básico de Vue.js 2

Clase 26 de 38

Clase 26 / 38

Recursos

¿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!

Emerson Cedeño

Hace 6 años

¿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

Hace 6 años

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:

<div>
    <ul>
        <li></li>
    </ul>
</div>

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

"emmet.includeLanguages": {
      "vue": "html"
  },

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:

"vetur.validation.template": 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:

"eslint.validate": [
    {
        "language": "vue",
        "autoFix": true
    },
    {
        "language": "html",
        "autoFix": true
    },
    {
        "language": "javascript",
        "autoFix": true
    }
],

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

"eslint.autoFixOnSave": true,

And tell our editor itself to formatOnSave.

"editor.formatOnSave": 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.

Comentarios (39)39 comentarios

David Alejandro Abreu Abreu

Hace 7 años

Eduardo Rafael Romero Bernal

Francisco J. López

David Behar

Jimmy Buriticá Londoño

William Condori

Andrés Felipe Lopez gomez

Hace 5 años

Jhonatan Hurtado Barbosa

Hace 4 años

Jhonatan Ferney Ospina

Nacho Anaya

Profesor

Abner Batz

Juan Esteban Galvis

Hernán Arica

Adrián Castillo

Arturo Casas Quiroga

jonathan sanchez

Camilo Bellon

Ana Lopez Lopez

aSXasx SAXasx

Jose L. Figueroa

Juan Pablo Cely W.

Diego Forero

Team Platzi

Maximo Martinez Soria

Carlos Eduardo Gomez García

Alejandro Vega Meneses

Andrés Felipe Rodríguez Rincón

Franz Pool Nuñez Villazana

Rafael Alejandro Belalcázar Burbano

Emmanuel Rodríguez

David Fernando Aguirre Rodriguez

cristian stiven velasquez garzon

Edmundo Salamanca Villa

Roberto Shirásago Domínguez

Enrique Devars

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

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

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

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