Estructura de directorios de Vue3
En el capítulo anterior usamos npm para instalar el proyecto (Vue-cli y Vite). Al abrir este directorio en un IDE (Vscode, Atom, etc.), la estructura es la siguiente:
Herramienta de línea de comandos vue-cli (ejemplo-vue3-test):
Vite（ejemplo-vue3-test2）
Un proyecto estándar de Vue 3 normalmente se puede dividir en tres capas:
- Directorio raíz del proyecto:Herramienta de compilación y configuración del proyecto
- Directorio public:Recursos estáticos que no participan en la compilación
- Directorio src:Casi todo el código de negocio está aquí; normalmente el desarrollo se realiza principalmente en este directorio.
Estructura típica de un proyecto Vue:
vue-project/ ├── public/ # 静态资源，直接复制到构建输出目录 │ └── favicon.ico # 网站图标 ├── src/ │ ├── assets/ # 静态资源（如图片、字体、CSS） │ │ └── logo.png │ ├── components/ # 可复用的通用组件 │ │ └── CommonHeader.vue │ ├── composables/ # 可复用的 Composition API 逻辑（可选） │ │ └── useFetch.js │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理（或 store/ 用于 Vuex） │ │ └── index.js │ ├── utils/ # 工具函数（如请求封装、格式化） │ │ └── request.js │ ├── views/ # 页面级组件（对应路由页面） │ │ ├── HomeView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 入口文件（创建 Vue 应用） ├── index.html # HTML 入口模板 ├── vite.config.js # Vite 配置文件 ├── package.json # 项目依赖与脚本 ├── .gitignore # Git 忽略文件 ├── .env # 环境变量（开发） ├── .env.production # 环境变量（生产） └── README.md # 项目说明
Análisis del directorio
| Ruta | Descripción |
|---|---|
| public/ | Almacena recursos estáticos que no serán procesados por la herramienta de compilación; se copian directamente al directorio dist. Se usa a menudo para favicon, robots.txt, etc. |
| public/favicon.ico | Icono del sitio web (favicon) |
| src/ | Directorio principal del código fuente del proyecto; todo el código de desarrollo se coloca aquí. |
| src/assets/ | Almacena recursos estáticos como imágenes, fuentes, CSS global, etc. Serán procesados por Vite (soporta importación). |
| src/components/ | Almacena componentes comunes reutilizables (como botones, tarjetas, componentes de diseño). |
| src/composables/ | Almacena funciones lógicas reutilizables de Composition API (la forma recomendada de reutilizar código en Vue 3). |
| src/router/ | Directorio de configuración de Vue Router; normalmente contiene index.js que define la tabla de rutas. |
| src/stores/ | Directorio de gestión de estado Pinia (recomendado oficialmente por Vue 3); almacena los módulos de cada store. |
| src/utils/ | Almacena funciones de utilidad, como encapsulamiento de axios, formato de fechas, constantes, etc. |
| src/views/ | Almacena componentes a nivel de página, normalmente corresponden uno a uno con las rutas (páginas de ruta). |
| src/App.vue | Componente raíz de la aplicación Vue, que contiene<router-view>puntos de renderizado de entrada, etc. |
| src/main.js | Archivo de entrada del proyecto; crea la instancia de la aplicación Vue, monta plugins (router, pinia, etc.) y se monta en #app. |
| index.html | Archivo de plantilla HTML, que contiene<div></div>Punto de montaje |
| vite.config.js | Archivo de configuración de la herramienta de compilación Vite; se pueden personalizar plugins, alias, proxy, etc. |
| package.json | Dependencias del proyecto, comandos de script (como dev, build, preview). |
| .gitignore | Archivo de ignorados de Git; normalmente ignora node_modules, dist, .env, etc. |
| .env / .env.production | Archivos de variables de entorno; se usan para configurar direcciones de API en diferentes entornos, etc. (en Vite, las variables que comienzan con VITE_). |
| README.md | Documentación del proyecto |
A medida que el proyecto crece, es posible que también necesites agregar estas carpetas:
- src/layouts/Diferentes diseños de página (como AdminLayout.vue, GuestLayout.vue).
- src/plugins/Plugins personalizados de Vue (como registro automático de componentes globales).
- src/directives/Directivas personalizadas (como v-loading).
- src/types/Declaraciones de tipos globales de TypeScript.
- tests/otests/Pruebas unitarias/E2E (Vitest + Vue Test Utils).
- src/api/Módulos separados para llamadas a APIs (más granulares que utils/request).
A continuación, tomamos ejemplo-vue3-test2 como ejemplo. Abre el archivo src/APP.vue en el directorio; el código es el siguiente (la explicación está en los comentarios):
Código del archivo src/APP.vue
<!-- Plantilla de visualización -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Código Vue -->
<script>
/* Importa el componente HelloWorld desde src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Código Vue -->
<script>
/* Importa el componente HelloWorld desde src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
A continuación, podemos intentar modificar el proyecto inicializado, cambiando src/APP.vue al siguiente código:
Código del archivo src/APP.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="¡Bienvenido al Tutorial de Ejemplo!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="¡Bienvenido al Tutorial de Ejemplo!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Abre la páginahttp://localhost:3000/Por lo general, después de la modificación se actualiza automáticamente, y el efecto se muestra de la siguiente manera:
