Tic Tac Vue

Tic-tac-vue

Tic-TAC-Vue es una simple aplicación de página de JavaScript (SPA) escrita con enrutador VUE, VUEX y VUE. Su objetivo es ser un "estudio de caso" para principiantes que desean aprender Vue y su poderoso ecosistema.

Haga clic aquí para probar la versión de demostración en línea.

Tabla de contenido

• Metodologías
• Habilidades técnicas
• Instalar
• Uso

Metodologías

En este proyecto, adopté dos metodologías para tener un código mejor factorado y archivos de origen organizados: BEM y diseño atómico.

Bem

BEM (que significa modificador de elementos de bloque) es una metodología que le ayuda a crear componentes reutilizables en el desarrollo frontal. Se trata de dividir sus clases CSS usando bloques , elementos y modificadores . El DOM final podría ser detallado, pero tendrá un mejor código fuente factorizado y, debido a que no tiene que anidar las clases de CSS, su paquete CSS resultará menos pesado.

Haga clic aquí si desea profundizar en BEM.

Diseño atómico

El diseño atómico es una metodología para crear sistemas de diseño. De manera similar a la química, puede organizar su archivo de componentes (en este escenario, vue componentes de un solo archivo) utilizando átomos , moléculas y organismos .

Átomos

Los átomos son los componentes básicos de la materia. Aplicado a las interfaces web, los átomos son nuestras etiquetas HTML, como una etiqueta de formulario, una entrada o un botón.

Moléculas

Las moléculas son grupos de átomos unidos y son las unidades fundamentales más pequeñas de un compuesto.

Organismos

Los organismos son grupos de moléculas unidas para formar una sección relativamente compleja y distinta de una interfaz.

Habilidades técnicas

En primer lugar, le sugiero que eche un vistazo a la documentación de Vue, especialmente para:

• Vue manipuladores
• Accesorios de vue
• Vue Propiedades calculadas
• Componentes de un solo archivo vue
• Estado vuex
• Vuex Getters
• Mutaciones vuex
• Enrutador vue

Instalar

Puede instalar Tic-Tac-Vue Cloning the Project:

 git clone https://github.com/Sanfra1407/tic-tac-vue.git

Luego instale dependencias de NPM:

 npm install

Uso

Dado que este proyecto se ha desarrollado con Vite.js, puede usar sus propios comandos CLI integrados para servir, construir o tener una vista previa de la aplicación.

Iniciar servidor de desarrollo

 npm run dev

Compila y minifica para la producción

 npm run build

Vista previa de la aplicación construida

 npm run preview

Pelusas y arregla archivos

 npm run lint

Desplegar

Para implementar su aplicación, puede seguir la guía oficial de Vite.js.