Cómo instalar VueJS 3 CLI, GUI y complementos – Parte 4

Introducción

En el último tutorial, aprendimos cómo instalar Vue 3 CLI y repasamos algunas de las nuevas funciones que se incluyeron con él.

En este artículo, repasaremos dos características que son realmente algo nuevo en el mundo de JavaScript Frameworks. Estas funciones son complementos e interfaz gráfica de usuario.

Complementos

Los complementos nos brindan la posibilidad de agregar nuevas funcionalidades a nuestro proyecto, independientemente de si el programa es nuevo o está en curso. Puede pensar en los complementos como paquetes adicionales que son como las dependencias típicas de un proyecto, pero con capacidades adicionales para editar los archivos fuente de configuración de nuestro proyecto.

Se pueden ver dentro del archivo package.json

  "devDependencies": {
    "@vue/cli-plugin-eslint": "^3.0.5",   <----
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }

La convención de nomenclatura para todos los complementos es la siguiente:

cli-plugin-(nombre del complemento)

¿Cómo agregamos un nuevo complemento?

Podemos hacerlo con el siguiente comando:

[[email protected] vue add ( name of the plugin ) 

In this case, we added vuetify,

Vuetify is a Material Design Component Framework for the Vue framework.

https://lqwb.us/2ON2G4M

To install this plugin, we use the following command: 

[[email protected] lwvuejs-custom]$ vue add vuetify ? Instalando vue-cli-plugin-vuetify... + [email protected] agregó 4 paquetes de 7 colaboradores y auditó 25170 paquetes en 9.021 encontró 0 vulnerabilidades ✔ Complemento instalado correctamente: vue -cli-complemento-vuetify ?  Elija un preajuste: (Use las teclas de flecha) ❯ Predeterminado (recomendado) Prototipo (desarrollo rápido) Configurar (avanzado)

Seleccionaremos la opción “Predeterminado (recomendado)” para esta instalación. A continuación, presionamos “Enter” y la salida se verá así:

?  Invoking generator for vue-cli-plugin-vuetify...
?  Installing additional dependencies...

added 3 packages from 2 contributors and audited 27325 packages in 8.335s
found 0 vulnerabilities

⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
   The following files have been updated / added:

     babel.config.js
     src/assets/logo.svg
     src/plugins/vuetify.js
     vue.config.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/components/HelloWorld.vue
     src/main.js
     src/views/Home.vue

   You should review these changes with git diff and commit them.

 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

Del resultado mencionado anteriormente, podemos ver que algunos de los archivos fueron modificados. Inicialmente mencionamos en la introducción que los complementos podrían alterar los archivos. Veamos qué cambios se produjeron. Archivo de ejemplo:

src/components/HelloWorld.vue with vuetify
[[email protected] lwvuejs-custom]$ cat src/components/HelloWorld.vue
<template>
  <v-container>
    <v-layout
      text-center
      wrap
    >
      <v-flex xs12>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>

      <v-flex mb-4>
        <h1 class="display-2 font-weight-bold mb-3">
          Welcome to Vuetify
        </h1>
        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers,
          <br>please join our online
          <a href="https://community.vuetifyjs.com" target="_blank">Discord Community</a>
        </p>
      </v-flex>

Al mirar hacia atrás, vemos que el aspecto del sitio predeterminado era el siguiente:

Después de instalar el complemento vuetify, la página predeterminada ahora se ve así:

Ahora podemos ver que nuestros componentes están actualizados con el aspecto de Material Design y que el complemento se indica en el archivo package.json.

[[email protected] lwvuejs-custom]$ grep cli-plugin-vuetify package.json
  "vue-cli-plugin-vuetify": "^2.0.2",

También podemos ver que el complemento se agregó a la carpeta src/plugins/ como vutify.js

[[email protected] plugins]$ cat vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
});

Inicio del servidor de desarrollo en un dominio

En un servidor en vivo, hay una forma inteligente de iniciar el servidor de desarrollo en un dominio. Logramos esto agregando el siguiente código al archivo vue.config.js dentro de la carpeta del proyecto. El código que debe agregarse se indica a continuación.

[[email protected] lwvuejs-custom]# cat vue.config.js
module.exports = {
  "transpileDependencies": [
    "vuetify"
  ]

}
module.exports = {
  devServer: {
    host: 'lwvuejs.tk'

  }
}

Una vez que se agrega el código, ejecutamos el siguiente comando para iniciar el servidor de desarrollo:

[[email protected] lwvuejs-custom]# npm run serve 

 DONE Compiled successfully in 18351ms                                                                                               8:29:26 AM

  App running at:
  - Local: https://lwvuejs.tk:8080/
  - Network: https://lwvuejs.tk:8080/

Tenga en cuenta que la compilación de desarrollo no está optimizada.
Para crear una compilación de producción:

[[email protected] lwvuejs-custom]# run npm run build.

¡Ahora podemos ver que el servidor de desarrollo se está ejecutando en nuestro dominio!

También debemos asegurarnos de que el puerto 8080 esté abierto. Si no está accesible, podemos abrirlo con el siguiente comando:

[[email protected] lwvuejs-custom]# iptables -I INPUT -p tcp --dport 8080 -j ACCEPT ( Port open for all the traffic)

[[email protected] lwvuejs-custom]# iptables -I OUTPUT -p tcp --dport 8080-j ACCEPT ( Port open for all the traffic)

[[email protected] lwvuejs-custom]# Iptables-save 

Vista de interfaz gráfica de usuario CLI

Una interfaz gráfica de usuario es algo nuevo en el mundo de los marcos de JavaScript. Si no es experto en la línea de comandos, esta opción le proporciona una GUI en la que puede hacer todas las cosas que normalmente se hacen a través de la línea de comandos.

Estas características incluyen:

  • Creando proyectos
  • La capacidad de gestionar proyectos.
  • La capacidad de instalar complementos
  • La capacidad de instalar otras dependencias.
  • La posibilidad de configurar opciones alternativas

Profundizaremos en una vista más profunda de la GUI en las siguientes secciones.

Vista inicial de la interfaz de usuario

Por lo general, si se encuentra en un servidor de desarrollo local, se inicia una interfaz de usuario con el siguiente comando:

[[email protected] lwvuejs-custom]# vue ui 

Este comando debería producir el siguiente resultado:

[[email protected] ~]# vue ui
? Starting GUI...
? Ready on https://localhost:8000

Si presiona el enlace, debería producir la siguiente imagen.

vue-project-manager-page2

Como podemos ver cuando escribimos:

[[email protected] ~]# vue ui -h 

Desafortunadamente, no hay opción para ejecutar la interfaz de usuario en un host específico.

[[email protected] ~]# vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information

vue --version

3.0.5 

Si desea ejecutar la interfaz de usuario en un servidor en vivo, tendríamos que hacer una actualización de versión secundaria ya que la interfaz de usuario no funciona en un servidor en vivo con la versión 3.0.5, que hemos instalado en este tutorial.

Entonces, el comando para actualizar a una nueva versión menor sería el siguiente:

npm install -g @vue/[email protected] ( UI able to run on live server ) 

La salida de este comando debe ser la siguiente:

[[email protected] ~]# npm install -g @vue/[email protected]
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size
/usr/bin/vue -> /usr/lib/node_modules/@vue/cli/bin/vue.js

> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> @apollo/[email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/@apollo/protobufjs
> node scripts/postinstall


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/nodemon
> node bin/postinstall || exit 0

Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate


> [email protected] postinstall /usr/lib/node_modules/@vue/cli/node_modules/ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/@vue/cli/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ @vue/[email protected]
added 700 packages from 527 contributors and updated 3 packages in 23.288s

Podemos ver que cuando Vue se actualiza a la versión 3.1.3, ahora hay una opción de Host cuando se usa el comando Vue ui.

[[email protected] ~]# vue --version
3.1.3
[[email protected] ~]# vue ui -h
Usage: ui [options]

start and open the vue-cli ui

Options:
  -H, --host <host>  Host used for the UI server (default: localhost)
  -p, --port <port>  Port used for the UI server (by default search for available port)
  -D, --dev          Run in dev mode
  --quiet            Don't output starting messages
  --headless         Don't open browser on start and output port
  -h, --help         output usage information

Pero antes de que podamos comenzar a usar la interfaz de usuario en el servidor en vivo, debemos abrir el puerto 8000 para el tráfico, ya que la interfaz de usuario escucha en ese puerto.

Para ello podemos ejecutar los siguientes comandos:

[[email protected] ~]# iptables -I INPUT -p tcp --dport 8000 -j ACCEPT ( Port open for all the traffic)

[[email protected] ~]# iptables -I OUTPUT -p tcp --dport 8000 -j ACCEPT ( Port open for all the traffic)

[[email protected] ~]# iptables-save

Eso debería abrir el puerto 8000 para todo el tráfico. Un mejor comando para usar restringiría el puerto a una dirección IP específica:

[[email protected] ~]# iptables -I INPUT -p tcp -s IP.ADD.RE.SS --dport PORT.NUMBER -j ACCEPT

[[email protected] ~]# iptables -I INPUT -p tcp -s IP.ADD.RE.SS --dport PORT.NUMBER -j ACCEPT

[[email protected] ~]# iptables-save 

Finalmente, podemos iniciar la interfaz de usuario con el siguiente comando:

[[email protected] ~]# vue ui -H lwvuejs.tk
?  Starting GUI...
?  Ready on https://lwvuejs.tk:8000

Uso de la interfaz de usuario

Una vez que hemos iniciado la interfaz de usuario, se nos presentan varias opciones en la primera pantalla.

  • Proyectos
  • Crear
  • Importar

Proyectos

Proyectos mostrará todos los proyectos existentes. En este caso, dado que no usamos la interfaz de usuario para crear un proyecto, no aparecerá ninguno en la lista. ¡Pero espera! Creamos dos proyectos llamados lwvuejs-default y lwvuejs-custom. Entonces, ¿por qué no se muestran en la página de proyectos?

No se muestran aquí porque se crearon a través de la línea de comandos.

¿Hay alguna forma de que aparezcan en la interfaz de usuario? ¡Sí hay! Podemos importarlos a la interfaz de usuario usando la “Opción de importación”. Al hacer clic en la opción Importar en la página principal, se nos presenta la siguiente pantalla.

ver la página del administrador de proyectos

En esta pantalla, una vez que hacemos clic en el ícono del bolígrafo negro en la esquina superior derecha, podemos escribir la ruta a nuestro proyecto. En este caso, esa ubicación sería:

[[email protected] ~]# /home/lwvuejs/public_html/lwvuejs-default 

y

[[email protected] ~]# /home/lwvuejs/public_html/lwvuejs-custom 

Si pulsamos enter nos moverá a nuestra carpeta de proyecto. Después de eso, en la parte inferior, podemos hacer clic en el botón Importar esta carpeta.

Y ahora, podemos ver ambos proyectos en nuestra pestaña Proyecto.

ver la página del administrador de proyectos

Si queremos gestionar los proyectos, podemos pulsar el nombre del proyecto, y nos llevará a una nueva ventana en la que podremos modificar todos los proyectos mencionados.

Crear un proyecto a través de la interfaz de usuario

Para crear un proyecto a través de la interfaz de usuario, debemos navegar a la página de inicio de la interfaz de usuario. Al presionar en la pestaña “Crear”, se nos presentará la siguiente pantalla.

crear_tab2.4.20

Ahora podemos ver que un icono vue indica nuestros dos proyectos. Para crear un nuevo Proyecto, presionamos el botón Crear un nuevo proyecto aquí.

crear_tab2.4.20

Después de haber hecho eso, se nos presentará la siguiente pantalla.

Crear un nuevo proyecto

La pantalla nos muestra lo mismo que hemos hecho a través de la línea de comandos en nuestro Primer Tutorial de esta serie.

Selecciona las siguientes opciones:

proyecto.carpeta.2.4.20

Al hacer clic en Siguiente, se nos presenta la siguiente pantalla en la que seleccionaremos la opción predeterminada.

vuejs-a crear-proyecto-bienvenido

Si elegimos cualquier otra opción que no sea la predeterminada, nos llevará a través de pasos adicionales para seleccionar diferentes opciones. Pero en este caso, podemos presionar el botón “Crear proyecto” por ahora, y después de unos minutos, cuando se cree el proyecto, seremos redirigidos al panel del proyecto.

proyecto.panel.2.4.20

También debemos tener en cuenta que al usar la línea de comando y ejecutar el comando

[[email protected] ~]# vue ui -H lwvuejs.tk 

podemos ver algunas líneas adicionales que indican que el proyecto fue creado.

[[email protected] ~]# vue ui -H lwvuejs.tk
? Starting GUI...
? Ready on https://lwvuejs.tk:8000
✨ Creating project in /home/lwvuejs/public_html/lwvuejs-custom/lwvuejs-ui.
⚓ Running completion hooks...
? Generating README.md...

El resto de las opciones son bastante sencillas. Esto puede ser mucho más fácil que utilizar la versión de línea de comandos, ya que le da a Vue JS una forma completamente nueva de administrar el marco de Javascript.

¡Reserve su lugar hoy!

Debido a la capacidad de Javascript para funcionar tanto en el frontend como en el backend, puede proporcionar la mecánica subyacente de múltiples marcos. Híbrido de Liquidweb Cloud Los servicios son perfectos para las PYMES que buscan alojar entornos de desarrollo y producción utilizando los beneficios de la tecnología VueJS.

Related Posts