Proyecto de blog Vue3
Este capítulo te llevará desde cero para crear un proyecto de blog Vue3 con Vite y entender la función de cada archivo en el proyecto.
Preparación del entorno
Antes de comenzar, asegúrate de que Node.js ya esté instalado en tu computadora.
Node.js es el entorno de ejecución de JavaScript que nos permite ejecutar código JS fuera del navegador.
La cadena de herramientas de desarrollo de Vue3 (Vite, npm) depende de Node.js.
Verificar si Node.js ya está instalado
Abre la terminal (CMD o PowerShell en Windows, Terminal en Mac) e ingresa el siguiente comando:
$ node -v v20.10.0
Si se muestra un número de versión (se recomienda v16 o superior), significa que ya está instalado.
Si no es así, ve anodejs.orgSimplemente descarga e instala la versión LTS.
Al instalar Node.js, se incluye automáticamente npm (Node Package Manager).
Comando de verificación:
npm -v
Crear un proyecto Vue3
Vue oficialmente recomienda usarcreate-vuela herramienta de andamiaje (scaffolding) para inicializar el proyecto.
En la terminal, entra al directorio donde quieres guardar el proyecto y ejecuta:
npm create vue@latest blog-app
Después de ejecutarlo, aparecerán una serie de opciones; elige de la siguiente manera:
| Opción | Selección | Descripción |
|---|---|---|
| Add TypeScript? | No | Los principiantes usen primero JS puro |
| Add JSX Support? | No | La sintaxis de plantillas es más intuitiva |
| Add Vue Router? | Yes | Más adelante se usará el enrutador (router) |
| Add Pinia? | Yes | Gestión de estado, se usará más adelante |
| Add Vitest? | No | De momento no se necesitan pruebas (tests) |
| Add ESLint? | No | Los principiantes no la necesitan por ahora |
Después de completar las selecciones, ejecuta en orden según las indicaciones:
$ cd blog-app $ npm install $ npm run dev
En este momento, el navegador abrirá automáticamente http://localhost:5173; si ves la página de bienvenida predeterminada de Vue, significa que el proyecto se inició correctamente.
npm installSe descargarán todos los paquetes de dependencias al directorio node_modules según package.json; este paso requiere conexión a internet y la primera vez puede tardar unos minutos.
Explicación detallada de la estructura de directorios del proyecto
Abre la carpeta blog-app y verás la siguiente estructura:
blog-app/ ├── index.html # 入口 HTML 文件 ├── package.json # 项目配置与依赖列表 ├── vite.config.js # Vite 构建工具配置 ├── public/ # 不经过编译的静态资源 ├── src/ │ ├── main.js # JS 入口，创建并挂载 Vue 应用 │ ├── App.vue # 根组件，所有页面的外壳 │ ├── assets/ # 需要编译的静态资源（CSS、图片） │ ├── components/ # 可复用的 Vue 组件 │ ├── views/ # 页面级组件（路由对应的页面） │ ├── router/ # 路由配置 │ └── stores/ # Pinia 状态管理
Función de los archivos principales
index.html— El archivo de entrada al que accede el navegador.
Vite inyectará automáticamente src/main.js en este archivo; no necesitas importar ningún JS manualmente.
src/main.js— El archivo de arranque de la aplicación Vue.
Se encarga de crear la instancia de la aplicación Vue, registrar los complementos (router, gestión de estado) y montar la aplicación en la página HTML.
src/App.vue— El componente raíz.
Es el contenedor más externo de todas las páginas; normalmente incluye la barra de navegación, el pie de página y la salida del router.
Componente de archivo único (SFC)
En Vue, cada.vuearchivo se denomina un «Componente de archivo único» (Single File Component).
Agrupa la plantilla, la lógica y los estilos de un mismo componente; un archivo es una unidad funcional independiente.
Estructura de tres partes del SFC
Ejemplo
// Tercera parte: lógica — escribe JS aquí
const message = 'Hello Vue3!'
</script>
<template>
<!-- Primera parte: plantilla — escribe HTML aquí -->
<h1>{{ message }}</h1>
</template>
<style scoped>
/* Segunda parte: estilos — escribe CSS aquí */
h1 {
color: #427DB8;
}
</style>
El orden de estas tres etiquetas puede ser arbitrario, pero el hábito habitual en la industria es:script → template → style。
| Sección | Función | Comprensión en una frase |
|---|---|---|
<script setup> | Escribir lógica JS, definir datos y métodos. | Controla qué hace el componente |
<template> | Escribir estructura HTML, enlazar datos | Controla cómo se ve el componente |
<style scoped> | Escribir estilos CSS | Controla la apariencia del componente |
scopedEl atributo scoped hace que los estilos del componente actual solo se apliquen a sí mismo y no contaminen otros componentes. Esta es una de las características principales de los componentes de archivo único de Vue.
Sintaxis de plantillas vs JSX
Vue usa por defectosintaxis de plantillaspara escribir interfaces.
La sintaxis de plantillas se escribe en<template><template>, HTML con directivas especiales de Vue.
| Característica | Sintaxis de plantillas | JSX |
|---|---|---|
| Forma de sintaxis | HTML + directivas de Vue | Escribir pseudo-HTML en JavaScript |
| Costo de aprendizaje | Bajo, cercano al HTML nativo | Requiere entender el mecanismo de compilación de JSX |
| Flexibilidad | Media, declarativa | Alta, se puede manipular libremente con JS |
| Nivel de recomendación de Vue | Recomendado por defecto | Soporte opcional |
| Escenarios de aplicación | Desarrollo de la gran mayoría de páginas | Cuando se necesita lógica compleja para generar UI dinámicamente |
Este tutorial usa en su totalidad la sintaxis de plantillas, porque es la forma más natural de Vue y la más adecuada para principiantes.
Manos a la obra: vaciar la plantilla y escribir el esqueleto del blog
Ahora vacía el contenido del App.vue generado por defecto y sustitúyelo por el esqueleto básico de nuestro blog.
Ejemplo
// Aquí se añadirá lógica más adelante
</script>
<template>
<div id="app">
<!-- Barra de navegación superior -->
<header class="navbar">
<h1>My Blog</h1>
<nav>
<a href="/">Inicio</a>
<a href="#">Acerca de</a>
</nav>
</header>
<!-- Área de contenido principal -->
<main class="container">
<p>El contenido del blog se mostrará aquí</p>
</main>
<!-- Pie de página -->
<footer class="footer">
<p>© 2024 My Blog. Powered by Vue3.</p>
</footer>
</div>
</template>
<style>
/* Restablecimiento global */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f5f5f5;
color: #333;
}
/* Barra de navegación */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 40px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.navbar h1 {
font-size: 24px;
color: #427DB8;
}
.navbar a {
margin-left: 20px;
text-decoration: none;
color: #333;
}
/* Área de contenido principal */
.container {
max-width: 960px;
margin: 40px auto;
padding: 0 20px;
}
/* Pie de página */
.footer {
text-align: center;
padding: 20px;
color: #999;
border-top: 1px solid #eee;
}
</style>
Después de guardar, el navegador se actualizará automáticamente y verás un esqueleto de blog limpio: barra de navegación superior + área de contenido central + pie de página inferior.
Este es el punto de partida para todos los capítulos siguientes.
Resumen del capítulo
En este capítulo has completado tres cosas: crear el proyecto Vue3 con Vite, comprender la estructura de directorios y las tres partes del SFC, y escribir el esqueleto HTML básico del blog.
Aprendizaje clave: saber que un.vuearchivo consta de tres partes: template / script / style, y cómo hacer que un proyecto Vue se ponga en marcha.