Vue 49: Componentes de Archivo Único y Vite
easy⏱ 5 mincoursevue
Anatomía de un archivo .vue
Un Componente de Archivo Único tiene hasta tres bloques: <template> (el markup), <script setup> (la lógica, usando la Composition API), y <style scoped> (CSS que Vite limita a este componente). El compilador de Vite separa estos bloques, compila la plantilla en una función de render, y reescribe los selectores CSS para que no puedan filtrarse a otros componentes.
<!-- Card.vue -->
<template>
<div class="card">
<p class="title">{{ label }}</p>
</div>
</template>
<script setup lang="ts">
defineProps<{ label: string }>()
</script>
<style scoped>
.card { padding: 16px; border-radius: 12px; background: #1e2a4a; }
.title { color: #42b883; font-weight: 700; }
</style>
Servidor de desarrollo vs. build de producción
vite (desarrollo) sirve tus archivos fuente mediante ESM nativo del navegador, y solo pre-empaqueta tus dependencias con esbuild — no hay un bundling completo de tu propio código, por eso el arranque y las actualizaciones en caliente son casi instantáneas. vite build es un pipeline distinto: pasa todo por Rollup para producir assets estáticos optimizados, con hash y tree-shaking, en una carpeta dist/ lista para desplegar.
# terminal
npm run dev # vite dev server: native ESM + esbuild pre-bundling
npm run build # rollup production bundle -> dist/
No hay bundler en este sandbox
Este sandbox del navegador solo puede ejecutar objetos planos de JavaScript/TypeScript pasados directamente a createApp — no tiene compilador para archivos .vue. Así que en lugar de cargar SFCs reales, la demo en vivo de abajo reproduce el efecto de <style scoped> a mano: inyectando etiquetas <style> reales cuyos selectores están limitados con un atributo único por componente, tal como lo hace por dentro el compilador de Vite.