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:

    $ 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.

    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.

    $ 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:

    $ 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.

    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.

     

    Etiquetas:

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *