¿Cuándo se lanzó vue3.0?
Curso recomendado: tutorial de vue
El autor de Vue, You Yuxi, anunció el lanzamiento oficial de Vue CLI 3.0 en Medium, que también traerá nuevas funciones tan esperadas para muchos desarrolladores.
Funciones integradas enriquecidas
Yuxi dijo que Vue CLI 3.0 es completamente diferente de otras versiones. Ha sido reconstruido para:
1, minimizar The. problemas al configurar herramientas front-end modernas, especialmente cuando los desarrolladores mezclan y usan múltiples herramientas;
2. Agregue las mejores prácticas a la cadena de herramientas tanto como sea posible y conviértala en la práctica predeterminada para las aplicaciones Vue.
El objetivo principal de Vue CLI es proporcionar configuraciones para compilaciones preconfiguradas basadas en webpack 4, con el objetivo de minimizar la cantidad de veces que los desarrolladores tienen que configurarlo, por lo que Vue CLI 3 admite versiones listas para usar. proyectos con las siguientes características:
(1) Funciones de paquete web preconfiguradas, como reemplazo en caliente de módulos, división de código, agitación de árboles, almacenamiento en caché persistente eficiente, etc.
(2)es 2017 se convierte mediante Babel 7+preset-env (complemento de Babel) y se inyecta polyfill según el uso.
(3) Admite PostCSS (autoprefixer habilitado de forma predeterminada) y todos los principales preprocesadores de CSS.
(4) Modo moderno: publique el paquete nativo ES2017 + y el paquete tradicional en paralelo (detalles a continuación).
(5) Modo multipágina: cree una aplicación con múltiples puntos de entrada HTML/JS.
(6) Objetivo de compilación: compilar componentes de un solo archivo de Vue en bibliotecas o componentes web nativos (específicamente de la siguiente manera)
Además, al crear un nuevo proyecto, puede mezclar y elija varias integraciones:
Documentos mecanografiados
SIDA
Routers y accesorios Vue. Vuex
ESLint/TSLint/Prettier
Pruebas unitarias con Jest o Mocha
Pruebas E2E con Cypress o Vigil.
Y Vue CLI puede garantizar que todas las funciones anteriores se puedan utilizar bien juntas.
Se puede configurar sin ventanas emergentes.
Todas las funciones enumeradas anteriormente admiten configuración cero: al crear un proyecto con Vue CLI 3, se instalará el servicio de ejecución de Vue CLI (@ vue/cli-service), seleccionará el complemento de función y generar los archivos de configuración necesarios. En otras palabras, sólo necesitas concentrarte en tu código.
Las herramientas CLI a menudo pierden la capacidad de ajustar posibles dependencias cuando las eliminan, por lo que los usuarios a menudo tienen que "salir" para realizar cambios. La desventaja de esto es que una vez que aparece, no podrás actualizar a la última versión de la herramienta a largo plazo.
You Yuxi cree que es muy importante acceder a la configuración de bajo nivel, pero no quiere abandonar a esos usuarios "emergentes", por lo que encontró un método de configuración sin ventanas emergentes. .
Para integraciones de terceros como Babel, TypeScript y PostCSS, Vue CLI respeta los archivos de configuración de estas herramientas. Los usuarios de Webpack pueden usar webpack-merge para fusionar objetos simples en la configuración final, o webpack-chain para ajustar y modificar los cargadores y complementos existentes.
Además, Vue CLI viene con el comando vue inspect para ayudarlo a inspeccionar la configuración interna del Webpack. La mayor ventaja es que aún puede actualizar los servicios y complementos de CLI con pequeños ajustes para correcciones o actualizaciones sin que aparezcan.
Sistema de complementos extensible
El sistema de complementos de Vue CLI 3 es muy poderoso: puede inyectar dependencias y archivos durante la fase de creación de la aplicación, ajustar la configuración del paquete web de la aplicación, o durante el proceso de desarrollo Inyecte comandos adicionales en el servicio CLI. La mayoría de las integraciones integradas, como TypeScript, utilizan la API del complemento para implementar la funcionalidad del complemento.
Además, Vue CLI 3 ya no tiene "plantillas". En cambio, ahora puedes configurarlo de forma remota y compartir tus complementos y opciones con otros desarrolladores.
Interfaz gráfica de usuario (GUI)
Gracias al excelente rendimiento de Guillaume Chau (el equipo central de Vue.js), Vue CLI 3 también viene con una GUI completa, que no Solo cuando crea un nuevo proyecto, también puede administrar complementos y tareas en el proyecto, como:
No requiere electrónica, simplemente inícielo con vue ui.
Nota: Aunque Vue CLI 3 se encuentra en una versión estable, la interfaz de usuario aún se encuentra en etapa de prueba y se actualizará continuamente.
Creación de prototipos en tiempo real
A veces necesitamos visitar el entorno de trabajo inmediatamente para obtener nueva inspiración, y esperar la instalación de npm se convierte en algo problemático. Usando el comando Vueserve de Vue CLI 3, solo necesita habilitar el componente de archivo único de Vue para realizar prototipos:
Más funciones
Modo moderno
Con Con Babel, puedes usar todas las funciones de idiomas más recientes en ES2015+, pero esto también significa que necesitamos traducciones y paquetes de relleno múltiple para admitir navegadores más antiguos. Estos paquetes convertidos suelen ser más detallados y más lentos de analizar y ejecutar que el código nativo ES 2015+ original. Dado que la mayoría de los navegadores modernos ahora admiten código nativo es 2015+, también deben admitir código más antiguo, pero es un desperdicio para el navegador ejecutar un código tan ineficiente.
Usar el "Modo moderno" puede ayudarte a resolver este problema. Al compilar, utilice el siguiente comando:
Vue-CLI-service build-modern Vue CLI generará dos versiones de la aplicación: una es el paquete Modern del navegador Modern que admite el módulo es, y la otra es el paquete Modern del navegador Modern que admite el módulo es. el otro son paquetes antiguos para navegadores antiguos que no admiten módulos ES.
El archivo HTML generado adopta automáticamente las técnicas analizadas en la publicación de Phillip Walton:
& ltscript type="module" >Los paquetes modernos se pueden cargar en navegadores que lo admitan. usar
Puedes usar
& módulo ltscript> La solución se inyectará automáticamente en Safari 10.
Para la aplicación Hello World, los paquetes modernos se redujeron en un 16%. En aplicaciones del mundo real, los paquetes modernos a menudo aceleran significativamente el análisis y la evaluación, mejorando así el rendimiento de carga de la aplicación.
Nota: La razón por la que el modo moderno no está configurado como predeterminado es que si se usa CORS/CSP, requerirá tiempos de compilación más largos y alguna configuración adicional.
Creación de componentes web
Ahora puedes crear cualquier cosa*. componente vue al componente web en el proyecto Vue CLI 3:
Vue-CLI-service build-Target WC-Name My-Element src/My componente Vue generará un paquete JavaScript y convertirá el Vue interno. El componente se encapsula, se registra como un elemento personalizado nativo en la página y luego se trata como artificial
Incluso puedes crear múltiples archivos *. Empaquete los componentes de vue en paquetes con múltiples divisiones de código:
vue-cli-service-build-target WC-async' src/components/*. 'vue' contiene un pequeño archivo de entrada en el paquete generado que registra todos los componentes como elementos personalizados nativos, pero el código de los componentes Vue subyacentes solo se puede obtener cuando se crea una instancia del elemento personalizado correspondiente por primera vez en la página.
Con Vue CLI 3, también puede utilizar la misma base de código para crear aplicaciones, bibliotecas UMD o componentes web nativos.
Finalmente, You Yuxi dijo que Vue CLI 3 ahora se puede utilizar como una herramienta de compilación estándar para aplicaciones Vue, pero esto es solo el comienzo. Como se mencionó anteriormente, el objetivo a largo plazo de Vue CLI es integrar las mejores prácticas actuales y futuras en la cadena de herramientas y, en última instancia, proporcionar a los usuarios aplicaciones de alto rendimiento.