Post Top Ad

Your Ad Spot

martes, 30 de junio de 2020

Vue-cli Webpack-Tutorial simple

Vue.js tiene una interfaz de línea de comandos opcional para construir rápidamente la plantilla para aplicaciones de tipo de página única. Es similar en naturaleza a la CLI angular que facilita la construcción de componentes. ¡Esto suena divertido, y algo que deberíamos configurar de inmediato! La herramienta vue-cli nos brinda un entorno de construcción "con baterías incluidas" que hace uso de todas esas herramientas frontales modernas de las que tanto escuchas hoy. Configurarlo es fácil y estará listo para funcionar con las actualizaciones de recarga en caliente, sin pelusa y listas para producción en un instante.

¿Por qué vue-cli?

Es posible que haya tenido una buena introducción a Vuejs en muchos de los tutoriales sobre Vue aquí y en la web en general. De hecho, también hemos visto cómo usar Vuejs con Laravel de manera bastante extensa. ¿Qué pasa cuando quiere construir un proyecto exclusivamente en Vuejs y aún así tener acceso a la recarga en caliente, la observación automática de archivos, el linting, etc.? Entonces, en lugar de simplemente vincular a un cdn para comenzar en una página html estática, ahora podemos usar vue-cli para construir un proceso de compilación completo para nosotros. Esta ruta optimiza nuestro código, lo que nos permite hacer uso de todas las funciones de ES6sin dejar de construir una aplicación final que apuntará a todos los navegadores. Además de esto, tendremos acceso a un servidor de desarrollo. Vuejs, por supuesto, se ejecuta en el cliente, pero la aplicación será atendida por un servidor de todos modos. Al crear su aplicación localmente, desea poder imitar este escenario del mundo real. La herramienta vue-cli lo hace posible.

Beneficios de usar vue-cli

  • VueJs se ejecuta en el cliente
  • La aplicación se sirve desde el servidor
  • La prueba de aplicaciones ahora se realiza en circunstancias realistas
  • No carga todos los archivos al inicio (permite la carga diferida)
  • Recarga automática en caliente

Instalar vue-cli

Antes de que podamos trabajar con el vue-cli, necesitamos instalarlo. Probablemente lo primero que quiere hacer es determinar dónde le gustaría trabajar. En nuestro caso, tenemos un directorio llamado localdev, por lo que podemos cd en ese directorio. A partir de aquí, debemos asegurarnos de que el nodo esté instalado.
C: \ localdev> nodo -v
v8.9.4
Si no lo tiene, puede instalar el nodo fácilmente y luego continuar. Los siguientes comandos nos pondrán en marcha con la plantilla webpack-simple para Vue. Los siguientes comandos instalarán la herramienta vue-cli globalmente en su máquina, inicializarán una plantilla vue webpack-simple en una carpeta vue-cli, instalarán todas las dependencias y finalmente lanzarán el proyecto.
C: \ localdev> npm install --global vue-cli
C: \ localdev> vue init webpack-simple vue-cli
C: \ localdev> cd vue-cli
C: \ localdev> npm install
C: \ localdev> npm run dev
Es probable que vea alguna salida en el terminal, como
> vue-cli@1.0.0 dev C: \ localdev \ vue-cli
> cross-env NODE_ENV = desarrollo webpack-dev-server --open --hot

El proyecto se ejecuta en http: // localhost: 8080 /
la salida del paquete web se sirve desde / dist /
Los 404 retrocederán a /index.html
Si todo esto funciona, se abrirá automáticamente una nueva ventana del navegador y se cargará http://localhost:8080/con esta salida.
Ejemplo de vue-cli webpack-simple
Esto significa que el servidor de desarrollo proporcionado por vue-cli funciona perfectamente y con eso, ¡ahora está listo para rockear!

El flujo de trabajo de desarrollo

Ahora que tenemos la herramienta vue-cli funcionando, tenemos algunos beneficios y cambios importantes en nuestro flujo de trabajo. Antes de enviar la aplicación al servidor de producción, queremos poder aplicar características especiales al proyecto que solo un flujo de trabajo de desarrollo puede ofrecer. Una gran ventaja es la capacidad de compilar componentes de un solo archivo en el proyecto. En otras palabras, los archivos individuales que tienen una extensión .vue y tienen una sección <template> <script> y <style> en el mismo archivo. Las plantillas de archivos individuales son un enfoque realmente genial para construir proyectos VueJS, pero necesita este flujo de trabajo de desarrollo para que un navegador web los compile en un código utilizable.
flujo de trabajo de desarrollo vue-cli

La estructura de carpetas webpack-simple vue-cli

Con nuestra instalación y configuración completa de la herramienta vuejs cli de webpack-simple, abramos el directorio que contiene nuestro proyecto en su IDE favorito.
estructura de carpetas vue-cli
Hablemos un poco sobre esta estructura de carpetas y los archivos contenidos en el proyecto vue-cli predeterminado webpack-simple.
  • Archivo babelrc : este archivo configura Babel para nosotros, de modo que podamos utilizar fácilmente ES6 y se trasladará a ES5 durante el proceso de compilación de compilación.
  • Archivo index.html : este es el archivo que realmente se sirve. Tenga en cuenta que la etiqueta de script hace referencia a un archivo build.js. Este archivo contiene el código que ha sido creado por webpack . Esto es lo que nos permite dividir nuestro código fuente en varios componentes y archivos que tiene sentido para nosotros, y luego todo se agrupa en un archivo durante el proceso de compilación. Este enfoque hace que la experiencia del desarrollador sea más placentera, al tiempo que permite un producto final ligero y agradable. La herramienta vue-cli hace todo el trabajo pesado por ti, lo cual es bueno.
  • Archivo package.json : este archivo administra todas las dependencias para el desarrollo y la producción. Tenga en cuenta la inclusión de la dependencia de vue-loader, que es lo que nos permite hacer uso de esas elegantes plantillas de archivo único .vue.
  • Archivo webpack.config.js : esta es la configuración esencialmente para la herramienta webpack incluida con vue-cli.

El archivo main.js

El archivo main.js es el primer archivo que se ejecuta cuando el paquete, o build.js, se carga en la página index.html. Lo que sucede en este archivo es que se crea una nueva instancia de Vue. Podemos hacer esto porque estamos importando la biblioteca Vue desde la carpeta vue como se ve en la primera línea de este archivo. También vemos la configuración familiar del elemento para ser el objetivo de Vue, en este caso es el elemento el que tiene la identificación de #app. El elemento div en el archivo index.html tiene este id. La función de representación se utiliza para sobrescribir el elemento en el archivo index.html con lo que representa el archivo App.vue. Una forma de ver el código a continuación es que la render: h => h(App)línea representa una plantilla y la coloca en el lugar del el: '#app',elemento. El archivo App.vue que se importa en la línea 2, es lo que se pasa a ser procesado por elh función.

Plantilla de archivo único App.vue

Esto nos lleva al objetivo principal de utilizar este enfoque. La aplicación. archivo vue . Los archivos Vue siempre seguirán una estructura específica. Tienen tres secciones distintas. Una sección <template> , un <script> y una <style> . Aquí están las tres secciones con el código de ejemplo proporcionado por la herramienta vue-cli.
Este archivo .vue de ejemplo que se incluye con la plantilla webpack-simple para la herramienta vue cli nos da un gran ejemplo de cómo funciona el flujo de trabajo, sin mencionar algunos excelentes enlaces a algunos recursos muy útiles de:
  • Documentos principales
  • Foro
  • Chat comunitario
  • Gorjeo
  • vue-router
  • vuex
  • vue-loader
  • impresionante-vue

Empezando

Con todo instalado y funcionando muy bien, ahora podemos iniciar nuestra propia aplicación. Podemos vaciar las secciones de plantilla, script y estilo y completar un ejemplo básico de cómo comenzar. Piensa en cosas de tipo "Hola Mundo" aquí.
Mientras npm run devtodavía se esté ejecutando desde la terminal, su navegador se recargará automáticamente gracias a las herramientas incluidas con vue cli. También tenga en cuenta que el complemento Vue chrome se ilumina, lo que indica que detecta una página web que está habilitada para Vue.
vue cli en funcionamiento

El objeto exportado

Observe cómo en la sección de secuencia de comandos del archivo .vue estamos exportando un objeto. La clave para recordar sobre este objeto exportado es que es una instancia de Vue. Por lo tanto, se comporta y abarca todo lo que sabemos sobre la configuración de una instancia de Vue, como el uso de un objeto de datos, un objeto de métodos, un objeto calculado, y así sucesivamente. Para ser justos, cuando se utiliza este enfoque, el objeto de datos se devuelve de una función. Esto es para que cada instancia de Vue tenga sus propios datos y no haya colisiones entre objetos.

npm run build

En este momento estamos simplemente usando npm run devpara trabajar y probar una instalación de la herramienta vue cli. Esto es excelente para realizar pruebas en el entorno local, pero ¿qué pasa si realmente desea publicar su aplicación en la web? En este caso, ejecutará npm run build . Esto construirá su aplicación para producción y verá una nueva distcarpeta que contiene el paquete terminado. Además, muchas optimizaciones se ejecutan durante el proceso de compilación, como la minificación, la recopilación y la compresión del tamaño del archivo.

Resumen del tutorial de Vue-cli Webpack-Simple

Como puede ver, el software vue-cli es una herramienta realmente genial para trabajar. Nos ayuda a crear mejores flujos de trabajo basados ​​en las plantillas disponibles proporcionadas. En nuestro caso, utilizamos webpack-simple, que es un buen punto medio entre un enfoque básico y un entorno de desarrollo completo. Puede elegir entre plantillas como webpack-simple, webpack, pwa, browserify, simple y browserify-simple. Puede aprender todo sobre estas plantillas en github si está interesado. Con nuestra instalación de cli completa, ahora tenemos acceso a esas fantásticas plantillas de archivo único .vue. Vimos que estos archivos contienen esas 3 secciones distintas de plantilla, script y estilo. Esta es una característica especial de Vuejs que hace que escribir sus instancias o componentes de Vue sea muy fácil para el desarrollador.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas