Breaking

Post Top Ad

Your Ad Spot

martes, 25 de junio de 2019

Primeros pasos con Vue CLI 3.x

Introducción

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 nueva herramienta de Interfaz de línea de comandos (CLI) podría muy bien aumentarlas aún más.
Andamio un Vue proyecto desde cero puede ser una cosa de enormes proporciones para acercarse, especialmente si usted no es particularmente cómodo con Vue.js .
Esta es la razón por la que Vue CLI es una herramienta imprescindible en su arsenal para asegurarse de que sus proyectos estén bien configurados desde el primer momento, lo que le permite elegir entre un puñado de plantillas y dejar que CLI haga que todo el código de trabajo esté listo. para ti.
Lo suficientemente emocionante, este último verano nos ha traído Vue CLI 3.0 , presentando un montón de nuevas características geniales como la Interfaz Gráfica de Usuario de Vue , ¡haciendo que la creación de un proyecto y la gestión de dependencias sea más fácil que nunca!

Servicio de CLI

El servicio CLI es una dependencia de desarrollo construida sobre Webpack , un agrupador de módulos estáticos para aplicaciones JavaScript, que es bastante similar a los scripts de reacción 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 (servicio, compilación, pelusa, etc.).

Prerrequisitos

Para que la CLI de Vue funcione, deberá instalar Node.js (versión 8.9+) en su computadora, para asegurarse de que puede usar NPM (Administrador de paquetes de nodos) o Yarn , dependiendo de su administrador preferido.

Instalación

Una vez que se descarga el nodo, la instalación de Vue CLI es tan simple como ejecutar un comando simple en su línea de comando:
$ npm install -g @vue/cli
O, para hilo:
$ yarn global add @vue/cli

Tu primer proyecto Vue.js

Una vez que haya instalado Vue CLI a nivel mundial, podrá acceder al vuecomando desde cualquier lugar de su computadora y lo necesitará para crear sus proyectos.
Hay varias formas de crear un proyecto simplemente ejecutando comandos:
$ vue create <project name>
Esta es la manera 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:
Vue CLI v3.2.1  
? Please pick a preset:
> default (babel, eslint)
 Manually select features
Por el bien de este tutorial, elegiremos las funciones Seleccionar manualmente para desplazarse a través de las diferentes páginas con las que se le pedirá:
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.
  • Escribas a máquina si quieres tener tipografías fuertes y acceder a funciones más modernas en tu código Javascript.
  • Soporte de la aplicación web progresiva (PWA) si desea hacer uso de las funciones controladas por PWA , como los trabajadores de servicio y el soporte fuera de línea.
  • Enrutador 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 selecciona esta opción, que elija si desea habilitar el modo Historial para el enrutador, que elimina el #signo de todos sus puntos finales.
  • Vuex tendrá un almacén centralizado para sus estados y gestionará los datos globales de su aplicación, además de gestionar cómo se modifican 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 / Formatter esto agregará linaje a su proyecto para asegurarse de que su código esté a la par con los estándares de código. Si selecciona esta opción y ha seleccionado Typescript, se le pedirá que elija una impresora / formateador como tal, si no ha elegido mecanografiar, 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 guiones de alineación / formateo al guardar o confirmar su repositorio 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
  • Unidades de prueba le permitirán elegir el marco de pruebas de unidad de su elección.
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
 Jest
  • Las pruebas E2E, al igual que las pruebas unitarias, le pedirán que elija su entorno de pruebas 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 agregarse como objetos dentro del package.jsonarchivo.
Además, se le preguntará si desea guardar esta configuración como un ajuste preestablecido, así como si desea seleccionar npm o hilo como su administrador de paquetes deseado.

Plugins CLI

Algunos complementos incorporados se pueden agregar usando el comando, como Vuetify , un Marco de Diseño de Materiales para Vue.js:
$ vue add <plugin name>
Un complemento de Vue CLI como su nombre comienza con cualquiera @vue/cli-plugin-vue-cli-plugin-- dependiendo de si son complementos integrados o de terceros.
Cuando ejecuta el vue-cli-service , carga automáticamente todos los complementos de la CLI enumerados dentro del package.jsonarchivo.
¡Felicidades, acaba de crear su primer proyecto Vue CLI!

Interfaz gráfica de usuario 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:
$ vue ui
Cuando se ejecute 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.
crear_proyecto
Además, puede administrar sus dependencias sin necesidad de administrarlas package.json, lo que viene con la versión deseada para cada paquete:
dependencias
Se pueden configurar configuraciones y widgets adicionales, y se pueden ejecutar algunas tareas automáticamente desde la interfaz de usuario de Vue, como ejecutar una comprobación de vulnerabilidades para sus dependencias que pueden tener problemas de seguridad, configurar un puerto que pueda matar para cerrar su aplicación , y habilite la fuente de noticias para tener las últimas actualizaciones del equipo de Vue!
promover
$ vue-init < template > < project name >
Siempre que desee utilizar una plantilla heredada de Vue CLI 2.x, debe instalar el vue-initservicio:
$ 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 regular.

Estructura de la carpeta

carpeta_estructura
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.
  • / público aquí es donde se index.htmldeben crear las vidas y donde se deben crear todos los bienes públicos, manifiestos y trabajadores de servicios.
  • / src , donde se agregará la fuente principal de su trabajo, la mayoría de los otros archivos de otras carpetas están preconfigurados, pero aquí es donde agrega todos sus componentes y códigos personalizados.
  • / src / asset donde agrega sus imágenes, iconos, fuentes, que luego se agregarán a la /distcarpeta.
  • / src / components aquí es donde agrega sus componentes, específicamente sus componentes individuales que no representan una página completa.
  • / src / views aquí tiene sus componentes de diseño.
  • / prueba donde tu unidad / e2e prueba en vivo.
Además, se agregará una carpeta / plugins siempre que haya utilizado el vue addcomando, donde se instalarán todos sus complementos.
Adicionalmente, main.jsrouter.jsstore.js, y App.vueserá de acuerdo a sus configuraciones seleccionadas durante la creación, junto con algunos ejemplos de caldera autogenerado.

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:
{
  "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 manejadores principales para administrar su aplicación.
Ejecutando lo siguiente iniciará su servidor de desarrollo con recarga en caliente:
$ 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 /distcarpeta que empaquetará todas sus aplicaciones, ningún paquete web o cualquier configuración adicional necesaria, usaremos:
$ npm run build
Se entregará una index.html, con todos los archivos JavaScript inyectan de forma automática, y jscssimgcarpetas para estos activos nombrados.
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 de la /testscarpeta se pueden ejecutar con el siguiente comando:
$ npm run test:unit
Además, package.jsonpuede mantener una configuración específica para linting, formateo, enganche de pre-commit, ¡y muchos más!

Despliegue

La /distcarpeta puede manejarse para cargar su aplicación en paquete a Github Pages, Heroku, Amazon S3, BitBucket Pages y muchos otros servicios.
Dependiendo del servicio de host que elija, deberá configurar la /distcarpeta para que coincida con las necesidades de su servidor, esto se puede hacer fácilmente a través del vue.config.jsarchivo (oa través de la pestaña de configuración de la interfaz de usuario de Vue), que se debe crear en el carpeta raíz de su proyecto:
module.exports = {}  
Aquí puede agregar la configuración necesaria para la implementación del servidor, como por ejemplo baseUrl.
Si su servidor está esperando que su aplicación se aloje en un punto final específico, como por ejemplo: http://www.testsite.com/test- necesitará configurar su baseUrlpara 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 que la /distcarpeta tenga 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.
Se podría añadir todos ellos dentro de su package.jsondentro de la vuepropiedad, pero darse cuenta de que tendrá que utilizar valores compatible con JSON solamente.

Conclusión

Vue.js está creciendo fuerte entre los otros marcos de JavaScript principales. Es bastante accesible, directo y muy resistente.
A pesar de que es fácil de usar, los recién llegados pueden tener un tiempo bastante difícil para configurar sus proyectos correctamente, especialmente si no está muy interesado en la línea de comandos.
Por suerte, Evan You, el creador de Vue, siempre está pensando en el futuro, y siempre está mejorando para sus compañeros desarrolladores, ¡lo que hace que configurar y configurar nuevas aplicaciones sea tan fácil como 1, 2, 3!
Para más información puede visitar la página oficial de Vue CLI .

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas