Cómo crear componentes en Vue CLI

Vue.js proporciona el Vue CLI para proporcionar el comando vue dentro de la terminal para crear rápidamente un nuevo proyecto de Vue.js y ejecute Vue.js proyecto usando el vue servir mando. Vue.js también proporciona la interfaz gráfica de usuario para administrar los proyectos utilizando la vue ui mando. Vue.js es reconocido por combinar dos frameworks espectaculares, Angular y React, usando la sintaxis de plantillas de Angular y el método props de React. Proporciona la forma tradicional de HTML y CSS para crear un componente, y en esta publicación, pasaremos por el proceso de creación y comprensión de componentes en Vue CLI.

Prerrequisitos

Antes de comenzar con esto, hay algunos requisitos previos que debe tener:

• Conocimientos básicos de HTML, CSS y JavaScript.
• Nodo.js instalado en su sistema operativo.

Verifique la instalación de Vue CLI

En primer lugar, asegúrese de tener instalada la última CLI de Vue en su sistema. Puede verificar que Vue CLI esté instalado o no en nuestro sistema escribiendo el comando que se proporciona a continuación:

$ vue --version

Si está instalado, tendrá la última versión de Vue CLI impresa en el terminal. De lo contrario, si no está instalado, puede usar el administrador de paquetes NPM o el administrador de paquetes Yarn para instalar la CLI de Vue. Para instalarlo usando el administrador de paquetes NPM, debe escribir el comando que se proporciona a continuación en la terminal:

$ npm instalar -g @ vue / cli

En el comando anterior, el -gramo flag se utiliza para instalar Vue CLI globalmente en su sistema.

Una vez que la CLI de Vue esté completamente instalada, puede verificarla escribiendo el comando que se indica a continuación:

$ vue --version

Tendrá la última versión de Vue CLI en la salida.

Creación de proyectos

Ahora, suponga que va a configurar todo el proyecto de Vue por su cuenta. En ese caso, no es una buena opción reinventar la rueda; el proyecto Vue se puede crear usando el vue comando en la terminal porque la CLI de Vue proporciona las plantillas ya generadas para comenzar con el proyecto Vue.

Para crear la aplicación Vue, simplemente escriba el comando que se proporciona a continuación en la terminal:

$ vue crear nombre de proyecto

Asegúrese de reemplazar el nombre del proyecto con el nombre de su proyecto deseado y presione Ingresar.

Después de un par de segundos, le pedirá que seleccione el ajuste preestablecido predeterminado o seleccione algunas funciones manualmente.

Si desea tener algunas funciones personalizadas, seleccione "Seleccionar funciones manualmente" presione Enter, y se le indicarán algunas opciones como seleccionar la versión de Vue, agregar Vuex o enrutador. Seleccione su opción deseada y presione Ingresar.

Responda algunas preguntas de configuración necesarias y guarde el ajuste preestablecido para proyectos futuros.

El proyecto de Vue se creará en un momento usando la CLI de Vue, y puede comenzar el desarrollo en Vue.js.

Iniciar la aplicación Vue

Una vez que se crea el proyecto Vue, puede iniciar el proyecto navegando primero al directorio del proyecto usando el comando cd en la terminal:

$ cd nombre-proyecto

En el directorio del proyecto, inicie la aplicación Vue escribiendo el comando que se indica a continuación en la terminal:

$ npm ejecutar servir

Después del encendido de la aplicación Vue, visite http: // localhost: 8080 en la barra de direcciones de su navegador favorito:

Tendrás la pantalla de bienvenida del Vue.proyecto js.

Creación de un componente en Vue

Para crear un componente en el proyecto Vue, cree un .vue archivo en el componentes carpeta y proporcione el nombre de su elección.

Ahora, en este recién creado .vue archivo, puede escribir HTML, Javascript y CSS en el