Cómo crear componentes en Vue CLI
Requisitos previos
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 la última CLI Vue instalada 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 -Versión
Si está instalado, tendrá la última versión de Vue CLI impresa en la terminal. De lo contrario, si no está instalado, puede usar el Administrador de paquetes de paquetes NPM o el Administrador de paquetes de hilo para instalar el Vue CLI. Para instalarlo utilizando el Administrador de paquetes NPM, debe escribir el comando que se proporciona a continuación en el terminal:
$ npm instalación -g @vue/cli
En el comando anterior, el -gramo El indicador se utiliza para instalar Vue CLI a nivel mundial en su sistema.
Una vez que la CLI Vue está completamente instalada, puede verificarla escribiendo el comando que se proporciona a continuación:
$ Vue -Versión
Tendrá la última versión de Vue CLI en la salida.
Creación de proyectos
Ahora, supongamos que va a configurar todo el proyecto VUE por su cuenta. En ese caso, no es una buena opción reinventar la rueda; El proyecto VUE se puede crear utilizando el vue Comando en el terminal porque la CLI 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 el terminal:
$ vue crea el nombre del proyecto
Asegúrese de reemplazar el nombre del proyecto con el nombre de su proyecto deseado y golpe Ingresar.
Después de un par de segundos, solicitará seleccionar el preajuste predeterminado o seleccionar algunas características manualmente.
Si desea tener algunas características personalizadas, seleccione "Seleccione las características manualmente" presione enter, y se le solicitará algunas opciones como seleccionar la versión VUE, agregar Vuex o enrutador. Seleccione la opción deseada y presione Ingresar.
Responda algunas preguntas de configuración necesarias y guarde el preajuste para futuros proyectos.
El proyecto VUE se creará en un tiempo utilizando la CLI 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 utilizando el comando CD en el terminal:
$ nombre de proyecto de CD
En el directorio del proyecto, inicie la aplicación VUE escribiendo el comando que se proporciona a continuación en el terminal:
Servicio de ejecución de $ npm
Después del encendido de la aplicación VUE, visite el 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 proporcionarle el nombre de su elección.
Ahora, en este recién creado .vue Archivo, puede escribir HTML, JavaScript y CSS en, y etiquetas, respectivamente.
Abrir el .vue archivo y escriba el código que desea escribir. Por ejemplo:
Un nuevo componente
Este es un texto dentro del nuevo componente.
Una vez que haya terminado con la parte HTML, le dé un nombre a este componente en la etiqueta como se muestra en el fragmento de código a continuación:
Después de crear con éxito el componente, veamos cómo importarlo y usarlo en alguna otra página o componente.
Importar un componente en Vue
La sintaxis de importación para importar un componente en cualquier otro componente de VUE es bastante simple y fácil; Solo tiene que importar el componente dentro de la etiqueta de script utilizando la sintaxis ES6 como se muestra en el fragmento de código a continuación:
Después de importar el componente correctamente, todo lo que necesita hacer es crear un objeto con el nombre de componentes y proporcionar el nombre en el componentes objeto como se muestra a continuación:
Ahora, puede usarlo en cualquier lugar dentro de la etiqueta del componente. Por ejemplo, si queremos importarlo al Aplicación.vue, La sintaxis sería así:
Después de completar toda esta configuración, guarde cada archivo que haya cambiado y vuelva al navegador
Puede presenciar en la captura de pantalla adjunta que el componente se importa con éxito y perfectamente bien en la página web.
Conclusión
Creación, importación y uso de un componente dentro de cualquier otro componente de Vue.JS es tan fácil como decirlo. En esta publicación, caminamos por todo el proceso de creación, adición y uso de un componente en Vue.js.