Primeros pasos con Vue CLI 3.x

Vue.js se está disparando a alturas inesperadas después de superar a React.js en las estrellas de GitHub, a pesar de no estar respaldado por ninguna compañía importante, y el lanzamiento de su ...

Introducción

Vue.js se está disparando a alturas inesperadas después de superar a Reaccionar.js en las estrellas de GitHub, a pesar de no estar respaldado por ninguna de las principales compañía, y el lanzamiento de su nueva herramienta de interfaz de línea de comandos (CLI) podría muy bien impulsarlos aún más.

Hacer un andamiaje de un proyecto de Vue desde cero puede ser una tarea desalentadora, especialmente si no se siente particularmente cómodo con Vue.js.

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

Emocionantemente, este último verano nos trajo Vue CLI 3.0, presentando un montón de funciones nuevas y geniales como la Interfaz gráfica de usuario de Vue, ¡haciendo 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 creada sobre paquete web, un paquete de módulos estáticos para aplicaciones JavaScript, que es bastante similar a react-scripts para React. js.

Es responsable de cargar los complementos, 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.).

Requisitos previos

Para que Vue CLI funcione, debe instalar [Node.js (versión 8.9+)] (https://nodejs.org/en/) en su computadora, para asegurarse de que puede usar NPM (Administrador de paquetes de nodos), o Hilo, dependiendo de su administrador preferido.

Instalación

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

1
$ npm install -g @vue/cli

O, para hilo:

1
$ yarn global add @vue/cli

Su primer proyecto Vue.js

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

Hay varias formas de crear un proyecto simplemente ejecutando comandos:

1
$ vue create <project name>

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

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

1
2
3
4
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 desplazarnos por todas las diferentes páginas que se le solicitarán:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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í puedes elegir cuáles son las características que quieres que tenga tu proyecto:

  • Babel por transpilar su código a ES5 Javascript, que todos los navegadores pueden entender.
  • Mecanografiado si desea tener escrituras sólidas y acceder a funciones más modernas en su código Javascript.
  • Soporte de aplicación web progresiva (PWA) si desea utilizar funciones impulsadas por PWA como trabajadores de servicio y soporte sin conexión.
  • Router que agregará el paquete Vue-router, que es una herramienta de enrutamiento increíble para sus aplicaciones de una sola página (SPA). Se le pedirá, si elige esta opción, que elija si desea tener habilitado el modo Historial para el enrutador, que elimina el signo # de todos sus puntos finales.
  • Vuex para tener una tienda centralizada para sus estados y administrar los datos globales de su aplicación, además de administrar cómo se modifican los datos en sus componentes y desde dónde dentro de Vue Devtools. (Ver Vue herramientas de desarrollo).
  • 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 altura de los estándares de 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.
1
2
3
4
5
6
? 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.

1
2
3
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
  • Pruebas unitarias le permitirá elegir el marco de pruebas unitarias de su elección.
1
2
3
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
 Jest
  • E2E Testing al igual que Unit Testing, le pedirá que elija su entorno de prueba E2E.
1
2
3
? 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 archivo package.json.

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

Complementos CLI

Se pueden agregar algunos complementos integrados mediante el comando, como Vuetificar, un marco de diseño de materiales para Vue.js:

1
$ vue add <plugin name>

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

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

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

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 la GUI de Vue accesible mediante este comando:

1
$ vue ui

Cuando se ejecuta este comando, se iniciará un servidor 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.

create_project

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

dependencies

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 eliminar para cerrar su aplicación y habilite la fuente de noticias para tener las últimas actualizaciones del equipo de Vue.

further

1
$ vue-init < template > < project name >

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

1
$ npm install -g @vue/cli-init

y entonces:

1
$ vue init webpack my-project

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

Estructura de carpetas {#estructura de carpetas}

folder_structure

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, por defecto se instalan cada vez que creas un proyecto.
  • /public aquí es donde reside index.html y donde se deben crear todos los activos públicos, manifiestos y trabajadores de servicios.
  • /src donde se agregará el pan y la carne principal 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 luego se agregarán a la carpeta /dist.
  • /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.
  • /test donde vive su unidad/pruebas e2e.

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

Además, main.js, router.js, store.js y App.vue se generarán automáticamente de acuerdo con las configuraciones seleccionadas durante la creación, junto con algunos ejemplos repetitivos.

El archivo package.json

Este es uno de los archivos más importantes, que contiene la mayor parte 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. :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
{
  "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:

1
$ npm run serve

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

Ahora, para crear una carpeta /dist que empaquetará todas sus aplicaciones, sin webpack ni ninguna configuración adicional necesaria, usaremos:

1
$ npm run build

Entregará un index.html, con todos los archivos JavaScript inyectados automáticamente, y las carpetas js, css e img 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:

1
$ npm run lint

En consecuencia, las pruebas unitarias, ubicadas dentro de la carpeta /tests se pueden ejecutar con el siguiente comando:

1
$ npm run test:unit

Además, package.json puede contener una configuración específica para el deslineado, el formateo, los enlaces previos a la confirmación y mucho más.

Despliegue

La carpeta /dist 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 la carpeta /dist para que coincida con las necesidades de su servidor, esto se puede hacer fácilmente a través del archivo vue.config.js (o a través de la pestaña de configuración de la interfaz de usuario de Vue para ese asunto), que debe crearse en la carpeta raíz de su proyecto:

1
module.exports = {}

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

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

1
2
3
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 que la carpeta /dist tenga un nombre diferente, puede elegir su outputDir:

1
2
3
4
5
module.exports = {
  baseUrl: '/test',
  assetsDir: 'static',
  outputDir: 'app'
}

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

Puede agregar todo esto dentro de su package.json dentro de la propiedad vue, 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, directo y muy resistente.

Aunque 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á dando un paso adelante para 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.