Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial simple de Vue-cli Webpack

 Tutorial simple de Vue-cli Webpack


Vue.js tiene una interfaz de línea de comandos opcional para crear rápidamente el modelo estándar para aplicaciones de tipo de página única. Es de naturaleza similar 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 modernas herramientas de interfaz de usuario de las que tanto se habla hoy en día. Configurarlo es fácil y estará listo y en funcionamiento con compilaciones de recarga en caliente, almacenamiento de 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é sucede cuando desea crear un proyecto exclusivamente en Vuejs y aún así obtener acceso a la recarga en caliente, la visualización automática de archivos, el borrado, etc.? Entonces, en lugar de simplemente enlazar a un cdn para comenzar en una página html estática, ahora podemos hacer uso de vue-cli para construir un proceso de compilación completo para nosotros. Esta ruta optimiza nuestro código, permitiéndonos hacer uso de todas las características de ES6 sin dejar de crear una aplicación final que se dirigirá 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á servida por un servidor de todos modos. Cuando construya su aplicación localmente, querrá 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
  • Las pruebas de aplicaciones ahora se realizan en circunstancias realistas
  • No cargar todos los archivos al inicio (permite la carga diferida)
  • Recarga automática en caliente

Instalar vue-cli

Antes de que podamos empezar a trabajar con vue-cli, necesitamos instalarlo. Probablemente lo primero que quiera hacer es determinar dónde le gustaría trabajar. En nuestro caso, tenemos un directorio llamado localdev, por lo que podemos entrar en ese directorio. Desde aquí, debemos asegurarnos de que el nodo esté instalado.

C: \ localdev> nodo -v
v8.9.4

Si no lo tiene, puede instalar fácilmente el nodo y luego continuar. Los siguientes comandos nos pondrán en funcionamiento con la plantilla simple de paquete web 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 ejecutar dev

Es probable que vea alguna salida en la 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 está ejecutando en http: // localhost: 8080 /
la salida del paquete web se sirve desde / dist /
Los 404 recurrirán a /index.html

Si todo esto funciona, una nueva ventana del navegador debería abrirse automáticamente y cargarse http://localhost:8080/con esta salida.
ejemplo de vue-cli webpack-simple

Esto significa que el servidor de desarrollo provisto por vue-cli está funcionando 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. Un gran beneficio es la capacidad de compilar componentes de un solo archivo en el proyecto. En otras palabras, archivos únicos que tienen una extensión .vue y tienen una sección <template> <script> y <style>, todos en el mismo archivo. Las plantillas de archivo único son un enfoque realmente genial para crear proyectos de VueJS, pero necesita este flujo de trabajo de desarrollo para que un navegador web pueda compilarlos en un código utilizable.

flujo de trabajo de desarrollo de vue-cli


La estructura de carpetas de webpack-simple vue-cli

Con nuestra instalación y configuración completa de la herramienta de cli vuejs 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 predeterminado webpack-simple vue-cli.

  • Archivo babelrc : este archivo configura Babel para que podamos hacer uso de ES6 fácilmente y se transpile a ES5 durante el proceso de compilación.
  • Archivo index.html : este es el archivo que realmente se sirve. Tenga en cuenta que la etiqueta de secuencia de comandos 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 tengan sentido para nosotros, y luego todo se agrupa en un solo archivo durante el proceso de compilación. Este enfoque hace que la experiencia del desarrollador sea más agradable, al tiempo que permite un producto final agradable y ligero. La herramienta vue-cli hace todo el trabajo pesado por ti, lo cual es bueno.
  • Archivo package.json : este archivo gestiona 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 está sucediendo 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 renderizado se usa para sobrescribir el elemento en el archivo index.html con lo que renderiza 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 para ser renderizado por elh función.


Plantilla de App.vue de archivo único

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 de <template> , <script> y <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 envía 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 básicos
  • Foro
  • Chat de la comunidad
  • Gorjeo
  • vue-enrutador
  • vuex
  • cargador de vue
  • impresionante-vue

Empezando

Con todo instalado y funcionando perfectamente, ahora podemos iniciar nuestra propia aplicación. Podemos vaciar las secciones de plantilla, secuencia de comandos y estilo y completar un ejemplo básico de cómo comenzar. Piense en el tipo "Hola mundo" aquí.

Mientras npm run devaún se esté ejecutando desde la terminal, su navegador se recargará en caliente automáticamente gracias a las herramientas incluidas con vue cli. También tenga en cuenta que el complemento de Chrome de Vue está iluminado, 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 script 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, etc. Para ser justos, al usar este enfoque, el objeto de datos en realidad se devuelve desde una función. Esto es para que cada instancia de Vue tenga sus propios datos y no haya colisiones entre objetos.


npm ejecutar compilación

En este momento simplemente estamos 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, en su lugar, ejecutará npm run build . Esto creará su aplicación para producción y verá una nueva distcarpeta que contiene el paquete terminado. Además, se ejecutan muchas optimizaciones durante el proceso de compilación, como la minificación, la transpilació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, hicimos uso de webpack-simple, que es un buen término 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 de desarrollar.

Publicar un comentario

0 Comentarios