Introducción a Vue CLI 3.x

Introducción

Vue.js se dispara a alturas inesperadas después de superar React.js en las estrellas de GitHub, a pesar de no contar con el respaldo de ninguna empresa importante, y el lanzamiento de su nueva herramienta de interfaz de línea de comandos (CLI) bien podría llevarlos aún más alto.

Andamio a Vue El proyecto desde cero puede ser abrumador de abordar, especialmente si no se siente particularmente cómodo con Vue.js.

Esta es la razón por Vue CLI es una herramienta imprescindible en su arsenal para asegurarse de que sus proyectos estén configurados correctamente desde el primer momento, lo que le permite elegir entre un puñado de plantillas y dejar que la CLI haga que todo el código repetitivo del trabajo duro se haga por usted.

Curiosamente, este último verano nos ha traído Vue CLI 3.0, presentando un montón de nuevas características interesantes como la interfaz gráfica de usuario de Vue, lo que hace que la creación de un proyecto y la administración de dependencias sean más fáciles que nunca.

Servicio CLI

El servicio CLI es una dependencia de desarrollo construida sobre Webpack, un paquete de módulos estáticos para aplicaciones JavaScript, que es bastante similar a los scripts de reacción para React.js.

Se encarga de cargar los plugins, asegurarse de que la configuración del paquete web esté optimizada, y nos permite tener comandos básicos para administrar nuestra aplicación (serve, build, lint, etc.).

Prerrequisitos

Para que funcione la CLI de Vue, debe instalar Node.js (versión 8.9+) en su computadora, para asegurarse de que pueda usar NPM (Administrador de paquetes de node)o Hilo, dependiendo de su gerente preferido.

Instalación

Una vez que se descarga Node, instalar la CLI de Vue es tan simple como ejecutar un comando simple en su línea de comandos:

$ npm install -g @vue/cli

O, para hilo:

Te puede interesar:Dockerización de aplicaciones Python

$ yarn global add @vue/cli

Tu primer proyecto de Vue.js

Una vez que haya instalado Vue CLI a nivel mundial, podrá acceder al vue comando desde cualquier lugar de su computadora y lo necesitará para crear sus proyectos estándar.

Hay varias formas de crear un proyecto simplemente ejecutando comandos:

$ vue create <project name>

Esta es la forma bash de hacer las cosas. Cuando ingrese el comando, se le pedirá varias veces cierta información de configuración para crear su proyecto.

En primer lugar, le preguntará si desea utilizar un ajuste preestablecido:

Vue CLI v3.2.1
? Please pick a preset:
> default (babel, eslint)
 Manually select features

Por el bien de este tutorial, elegiremos Seleccionar funciones manualmente para desplazarse por las diferentes páginas que se le solicitarán:

Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

Aquí puede elegir cuáles son las características que desea que tenga su proyecto:

• Babel para transpilar su código a ES5 Javascript, que todos los navegadores pueden entender.
• Mecanografiado si desea tener mecanografía sólida y acceder a funciones más modernas en su código Javascript.
• Compatibilidad con aplicaciones web progresivas (PWA) si desea utilizar funciones impulsadas por PWA, como service-workers y soporte fuera de línea.
• Enrutador que agregará el paquete Vue-router, que es una herramienta de enrutamiento increíble para sus aplicaciones de página única (SPA). Se le pedirá, si elige esta opción, que elija si desea que el modo Historial esté habilitado para el enrutador, que elimina el # firmar desde todos sus puntos finales.
• Vuex para tener una tienda centralizada para sus estados y administrar los datos globales de su aplicación, así como administrar cómo se cambian los datos en sus componentes y desde dónde desde Vue Devtools. (Ver Vue Devtools).
• Preprocesadores CSS para elegir el preprocesador CSS de su elección, si elige esta opción, se le pedirá que elija entre Sass / Less, Less o Stylus.
• Linter / Formateador esto agregará pelusa a su proyecto para asegurarse de que su código esté a la par con los estándares del código. Si elige esta opción y ha elegido Mecanografiado se le pedirá que elija un linter / formateador como tal, si no ha elegido mecanografiado, no se le pedirá TSLint.

? Pick a linter / formatter config: (Use arrow keys)
> TSLint
 ESLint with error prevention only
 ESLint + Airbnb config
 ESLint + Standard config
 ESLint + Prettier

Además, puede elegir si desea agregar gitHooks a su configuración. Estos ejecutarán sus scripts de linting / formateo al guardar o confirmar en su repositorio de git.

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit

• Unit Testing le permitirá elegir el marco de prueba unitario de su elección.

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
 Jest

• La prueba E2E, al igual que la prueba unitaria, le pedirá que elija su entorno de prueba E2E.

? Pick a E2E testing solution: (Use arrow keys)
 Cypress (Chrome only)
 Nightwatch (Selenium-based)

Después de todas estas opciones, deberá decidir si desea tener todas las configuraciones en archivos separados o simplemente agregarlas como objetos dentro del package.json archivo.

Además, se le preguntará si desea guardar esta configuración como un ajuste preestablecido, así como si desea elegir npm o yarn como su administrador de paquetes deseado.

Te puede interesar:Vue-Router: Navegación por aplicaciones de Vue.js

Complementos CLI

Algunos plugins integrados se pueden agregar usando el comando, como Vuetificar, un marco de diseño de materiales para Vue.js:

$ vue add <plugin name>

Un plugin de Vue CLI, ya que sus nombres comienzan con @vue/cli-plugin- o vue-cli-plugin- – dependiendo de si son plugins integrados o de terceros.

Cuando ejecuta vue-cli-service, carga automáticamente todos los plugins CLI enumerados dentro del package.json archivo.

¡Felicitaciones, acaba de crear su primer proyecto CLI de Vue!

Interfaz gráfica de usuario de Vue

Si no quiere pasar por la molestia de las líneas de comando, o simplemente no le gustan los fondos oscuros con líneas blancas, siempre puede usar el GUI de Vue accesible por este comando:

$ vue ui

Cuando se ejecuta este comando, un servidor se iniciará en http: // localhost: 8000.

Aquí puede crear sus proyectos de la misma manera que lo haría con la línea de comandos, pero con una interfaz de usuario agradable.

Además, puede administrar sus dependencias sin la necesidad de administrarlas desde package.json, que viene con la versión deseada para cada paquete:

Se pueden configurar más configuraciones y widgets, y algunas tareas se pueden ejecutar automáticamente desde la interfaz de usuario de Vue, como ejecutar una verificación de vulnerabilidad para sus dependencias que pueden tener problemas de seguridad, configurar un puerto que puede matar para cerrar su aplicación y habilite el servicio de noticias para tener las últimas actualizaciones del equipo de Vue.

Te puede interesar:Presentamos Camo: un ODM ES6 basado en clases para bases de datos similares a Mongo

$ vue-init < template > < project name >

Siempre que desee utilizar una plantilla heredada de Vue CLI 2.x, debe instalar la vue-init Servicio:

$ npm install -g @vue/cli-init

y entonces:

$ vue init webpack my-project

Entonces podrá configurar su proyecto como lo haría con un proyecto normal.

Estructura de carpetas

Cada proyecto creado viene con varias carpetas que están configuradas para facilitar su uso:

• / node_modules aquí es donde se instalarán todas las dependencias empaquetadas, de forma predeterminada se instalan cada vez que crea un proyecto.
• / public aquí es donde el index.html vidas y donde se deben crear todos los bienes públicos, manifiestos y trabajadores de servicios.
• / src donde se agregará el pan y la carne principales de su trabajo, la mayoría de los otros archivos de otras carpetas están preconfigurados, pero aquí es donde agrega todo su código y componentes personalizados.
• / src / assets donde agrega sus imágenes, íconos, fuentes, que, más adelante, se agregarán al /dist carpeta.
• / src / components aquí es donde agrega sus componentes, específicamente sus componentes individuales que no representan una página completa.
• / src / views aquí tienes tus componentes de diseño.
• / prueba donde viven tus pruebas de unidad / e2e.

Además, se agregará una carpeta / plugins siempre que haya utilizado la vue add comando, donde se instalarán todos sus plugins.

Adicionalmente, main.js, router.js, store.jsy App.vue se generará automáticamente de acuerdo con las configuraciones seleccionadas durante la creación, junto con algunos ejemplos estándar.

El archivo package.json

Este es uno de los archivos más importantes, que contiene la mayoría de la configuración de sus proyectos, como el nombre, la versión, los scripts automatizados que puede usar a través de NPM y las dependencias, que son paquetes de terceros que puede usar en su proyecto:

{
  "name": "vue-cli-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.2.0",
    "@vue/cli-plugin-eslint": "^3.2.0",
    "@vue/cli-plugin-unit-jest": "^3.2.0",
    "@vue/cli-service": "^3.2.0",
    "@vue/eslint-config-prettier": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "eslintConfig": {
    "root": true,
    "env": {
    "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier"
    ],
    "rules": {},
      "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

La etiqueta de scripts revela sus identificadores principales para administrar su aplicación.

Ejecutar lo siguiente iniciará su servidor de desarrollo con recarga en caliente:

Te puede interesar:Copia de seguridad y restauración de bases de datos de PostgreSQL

$ npm run serve

Esto significa que notará cambios en el archivo para que no tenga que reiniciar el servidor cada vez que actualice su código o recursos.

Ahora, para crear un /dist carpeta que empaquetará todas sus aplicaciones, sin paquete web ni configuraciones adicionales necesarias, usaremos:

$ npm run build

Entregará un index.html, con todos los archivos JavaScript inyectados automáticamente, y js, cssy img carpetas para estos activos con nombre.

Además, si desea ver todos sus archivos y procesarlos usando su eslint o configuraciones más bonitas, puede usar:

$ npm run lint

En consecuencia, las pruebas unitarias, ubicadas dentro del /tests La carpeta se puede ejecutar con el siguiente comando:

$ npm run test:unit

Más, package.json puede contener configuraciones específicas para linting, formateo, pre-commit hooks y muchos más.

Despliegue

los /dist La carpeta se puede manejar para cargar su aplicación incluida en Github Pages, Heroku, Amazon S3, BitBucket Pages y muchos otros servicios.

Dependiendo del servicio de host que elija, deberá configurar el /dist carpeta para satisfacer las necesidades de su servidor, esto se puede hacer fácilmente a través de la vue.config.js archivo (oa través de la pestaña de configuración de Vue UI para el caso), que debe crearse en la carpeta raíz de su proyecto:

module.exports = {}

Aquí puede agregar la configuración necesaria para la implementación del servidor, como el baseUrl.

Te puede interesar:Automatización de confirmaciones de control de versiones

Si su servidor está esperando que su aplicación se aloje en un punto final específico, como: http://www.testsite.com/test – necesitará configurar su baseUrl para adaptarse a ese punto final:

module.exports = {
  baseUrl: '/test'
}

Por otro lado, si su servidor está esperando que sus archivos estáticos estén en una carpeta específica, también puede especificarlo, o si desea tener el /dist carpeta con un nombre diferente, puede elegir su outputDir:

module.exports = {
  baseUrl: '/test',
  assetsDir: 'static',
  outputDir: 'app'
}

Estos son solo ejemplos de las muchas configuraciones que puede agregar a su proyecto.

Podrías agregar todos estos dentro de tu package.json dentro de vue propiedad, pero tenga en cuenta que solo tendrá que usar valores compatibles con JSON.

Conclusión

Vue.js se está fortaleciendo entre los otros marcos principales de Javascript. Es bastante accesible, sencillo y muy resistente.

A pesar de que es fácil de usar, los recién llegados pueden tener dificultades para configurar sus proyectos correctamente, especialmente si no está muy interesado en la línea de comandos.

Afortunadamente, Evan You, el creador de Vue, siempre está pensando en el futuro y siempre está al lado de sus compañeros desarrolladores, ¡haciendo que configurar y configurar nuevas aplicaciones sea tan fácil como 1, 2, 3!

Para más información puede visitar, Página oficial de Vue CLI.

 

Te puede interesar:Monitoreo de cambios de datos usando un HIDS