Tic Tac Vue

Tic-tac-vue

Tic-Tac-Vue est une simple application JavaScript unique (SPA) écrite avec Vue, Vuex et Vue Router. Son objectif est d'être une "étude de cas" pour les débutants qui veulent apprendre Vue et son puissant écosystème.

Cliquez ici pour essayer la version de démonstration en ligne.

Tableau de contenu

• Méthodologies
• Compétences techniques
• Installer
• Usage

Méthodologies

Dans ce projet, j'ai adopté deux méthodologies pour avoir un code mieux pris en compte et des fichiers source organisés: la conception BEM et atomique.

Couler

BEM (qui signifie Block Element Modificateur) est une méthodologie qui vous aide à créer des composants réutilisables dans le développement frontal. Il s'agit de diviser vos classes CSS à l'aide de blocs , d'éléments et de modificateurs . Le DOM final pourrait être verbeux, mais vous aurez un code source mieux pris en compte et, parce que vous n'avez pas à nidifier les cours CSS, votre bundle CSS entraînera moins lourd.

Cliquez ici si vous voulez aller plus loin dans BEM.

Conception atomique

La conception atomique est une méthodologie pour créer des systèmes de conception. De façon similaire à la chimie, vous pouvez organiser votre fichier de composants (dans ce scénario vue composants de fichiers uniques) en utilisant des atomes , des molécules et des organismes .

Atomes

Les atomes sont les éléments de base de la matière. Appliqués aux interfaces Web, les atomes sont nos balises HTML, telles qu'une étiquette de formulaire, une entrée ou un bouton.

Molécules

Les molécules sont des groupes d'atomes liés ensemble et sont les plus petites unités fondamentales d'un composé.

Organismes

Les organismes sont des groupes de molécules réunies pour former une section distincte et distincte d'une interface.

Compétences techniques

Tout d'abord, je vous suggère fortement de jeter un œil à la documentation Vue, en particulier à:

• Vue Handlers
• Vue accessoires
• Vue Propriétés calculées
• Vue composants de fichiers uniques
• État Vuex
• Vuex Getters
• Mutations Vuex
• Routeur Vue

Installer

Vous pouvez installer Tic-Tac-Vue Cloning Le projet:

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

Installez ensuite les dépendances NPM:

 npm install

Usage

Depuis que ce projet a été développé avec Vite.js, vous pouvez utiliser ses propres commandes CLI intégrées pour servir, construire ou pour avoir un aperçu de l'application.

Démarrer le serveur de développement

 npm run dev

Compiles et minifie pour la production

 npm run build

Aperçu de l'application construite

 npm run preview

Lints et corrige les fichiers

 npm run lint

Déployer

Pour déployer votre demande, vous pouvez suivre le guide officiel Vite.js.