No necesita instalar todas las cosas en su mácina para probar SFCs Vue, hay múltiples áreas de pruebas en líneas que le permite hacerlo justo en el navegador:
- Área de Pruebas de Vue SFC (oficial, desplegado con el último commit)
- Área de Pruebas de VueUse
- Vue en CodeSandbox
- Vue en Repl.it
- Vue en Codepen
- Vue en StackBlitz
- Vue en Components.studio
- Vue en WebComponents.dev
Es también recomendado utilizar estas áreas de pruebas en líneas para proveer reproducciones cuando reporte errores.
Vite es una herramienta de construcción ligera y rápida con soporte de primera clase para SFC Vue. Es creado por Evan You, ¡quien es también el autor de Vue mismo! Para empezar con Vite + Vue, simplemente ejecuta:
npm init vite@latestEntonces seleciona la plantilla Vue y seguir las instrucciones.
- Para aprender más sobre Vite, echa un vistazo a las documentaciones de Vite.
- Para configurar comportamientos específicos de Vue en un proyecto de Vite, por ejemplo pasar opciones al compilador de Vue, echa un vistazo a las documentaciones de @vitejs/plugin-vue.
La área de pruebas de SFC también soporta descargar los archivos como un proyecto de Vite.
Vue CLI es la herramienta de compilación oficial basada de webpack para proyectos de Vue. Para empezar con Vue CLI:
npm install -g @vue/cli
vue create hello-vue- Para aprender más sobre Vue CLI, echa un vistazo a documentaciones de Vue CLI.
Nosotros recomendamos empezar nuevos proyectos con Vite debido a que ofrece drásticamente mejor experiencia de desarrollo en términos de rendimiento de la inicialización de servidor de desarrollo y actualización de recarga en caliente (HMR) (detalles). Solo opta por Vue CLI si depende de características específicas de webpack (p. ej. federación de módulos (Module Federation)).
Si usted es un usuario de Rollup, puede adopta Vite con seguridad debido a que utiliza Rollup para las construcciones de producción y soporta el sistema de plugins compatibles con Rollup. Incluso el mantenedor de Rollup recomienda Vite como el envoltorio de desarrollo web para Rollup.
La configuración recomendada de IDE es VSCode + la extención Volar. Volar provee el resaltado de sintaxis y IntelliSense avanzada para epxresiones de plantilla, props de componente y incluso la validación de slots. Recomendamos encarecidamente esta configuración si quiere obtener la mejor posible experiencia con los SFCs Vue, especialmente si está también utilizando TypeScript.
WebStorm también provee soporte decente para los SFCs Vue. Sin embargo, tenga en cuenta que ahora su soporte para <script setup> es todavía en curso.
La mayoría de otros editores tienen soporte de resaltado de sintaxis creado por la comunidad para Vue, pero falta el mismo nivel de IntelliSense de código. A largo plazo, Esperamos que podamos extender el rango de soporte de editores mediante apalancar el protocol de servicio de lenguaje debido a que la lógica principal de Volar es implementada como un servidor estándar de lenguaje.
-
Si se utilice Vite, recomendamos Cypress como el mejor ejecutor para las pruebas unitarias y e2e. Las pruebas unitarias para SFCs Vue pueden realizarse con el ejecutador de pruebas de componentes de cypress.
-
Si está configurando manualmente Jest para trabajar con SFCs Vue, echa un vistazo a vue-jest, lo que es la transformación oficial de Jest para SFCs Vue.
Bloques Personalizados son compilados en importaciones al mismo archivo Vue con queries de solicitudes distintos (different request queries). La herramienta de compilación subyacente puede decidir cómo manajar estas solicitudes de importación.
-
Si se utiliza Vite, un plugin personalizado de Vite debe ser utilizado para transformar los bloques personalizados correspondidos en JavaScript ejecutable. [Ejemplo]
-
Si se utiliza Vue CLI o webpack plano, un cargador webpack debe ser configurado para transformar los bloques correspondidos. [Ejemplo]
Este paquete es parte del monorepo núcleo de Vue y siempre publicado con la misma versión como el paquete principal vue. Típicamente, será listado como una dependencia peer de vue en un proyecto. Para asegurarse del comportamiento correcto, su versión debe ser siempre sincronizado con vue, es decir, cada vez que actualice la versión de vue, debería también actualizar @vue/compiler-sfc para que coincidan.
El paquete mismo provee utilidades de nivel inferior para procesar SFCs Vue y sólo está dedicado para los autores de herramientos que necesitan soportar SFCs Vue en herramientas personalizadas.
El plugin oficial que provee soporte de SFC Vue en Vite.
El cargador oficial que provee soporte de SFC Vue en webpack. Si está utilizando Vue CLI, vea también la documentación sobre modificar opciones de vue-loader en Vue CLI.