Initial commit
add blocksystem files.
This commit is contained in:
42
blocksystem/README.md
Normal file
42
blocksystem/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# BlockSystem
|
||||
|
||||
BlockSystem es una aplicación educativa interactiva construida con Vue 3, centrada en el componente **`Blocks.vue`**. Este componente permite a los usuarios colocar, arrastrar, agrupar y dividir bloques unitarios en una cuadrícula, fomentando la intuición matemática sobre agrupamiento y valor posicional (unidades y decenas).
|
||||
|
||||
La aplicación incluye una interfaz completa con modos de demostración y ejercicios prácticos de suma, diseñada para apoyar el aprendizaje de conceptos matemáticos básicos de manera visual e interactiva.
|
||||
|
||||
`App.vue` sirve como implementación de referencia, mostrando cómo integrar y configurar `Blocks.vue` en una aplicación real, incluyendo configuraciones avanzadas y ejercicios educativos. El proyecto ahora documenta con más precisión el uso del modo `inline` para mostrar grids compactos en la demo de ejercicios, y mantiene `initialBlocks` como una forma general de precargar grupos de bloques sin depender de un layout fijo. La demo de ejercicios también incluye una zona de dropzone visual junto al grid para validar la respuesta al soltar la solución final.
|
||||
|
||||
Para detalles de la API y configuración de `Blocks.vue`, consulta `src/README.md`.
|
||||
|
||||
## Requisitos
|
||||
|
||||
Antes de ejecutar el proyecto, asegúrate de tener instalados:
|
||||
- Node.js (versión recomendada: 18+)
|
||||
- npm o yarn
|
||||
|
||||
Puedes descargar Node.js desde: [https://nodejs.org/](https://nodejs.org/)
|
||||
|
||||
## Configuración
|
||||
|
||||
Navega al directorio raíz del proyecto y ejecuta el siguiente comando en la terminal:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
Este comando instalará automáticamente Vue, Vite, TypeScript y las configuraciones necesarias de @vue/tsconfig para el proyecto.
|
||||
|
||||
### Ejecutar la Aplicación
|
||||
|
||||
Para iniciar el servidor de desarrollo, ejecuta:
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Esto lanzará la aplicación en modo desarrollo utilizando Vite.
|
||||
|
||||
## Configuración Recomendada del IDE
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (y desactiva Vetur).
|
||||
|
||||
Reference in New Issue
Block a user