Tic Tac Vue

Tic-tac-Vue

TIC-TAC-VUE ist eine einfache JavaScript-Einzel-Seiten-Anwendung (SPA), die mit Vue, Vuex und Vue-Router geschrieben wurde. Sein Ziel ist es, eine "Fallstudie" für Anfänger zu sein, die Vue und sein mächtiges Ökosystem lernen möchten.

Klicken Sie hier, um die Online -Demo -Version auszuprobieren.

Inhaltstabelle

• Methoden
• Technische Fähigkeiten
• Installieren
• Verwendung

Methoden

In diesem Projekt habe ich zwei Methoden angewendet, um einen besser faktorisierten Code und organisierten Quelldateien zu haben: BEM- und Atomdesign.

Bem

BEM (was bedeutet, dass Blockelementmodifikator) eine Methodik ist, mit der Sie wiederverwendbare Komponenten in der Front-End-Entwicklung erstellen können. Es geht darum, Ihre CSS -Klassen mit Blöcken , Elementen und Modifikatoren zu teilen. Das letzte DOM könnte ausführlich sein, aber Sie haben einen besser faktorisierten Quellcode, und weil Sie keine CSS -Klassen nisten müssen, führt Ihr CSS -Bündel weniger schwer.

Klicken Sie hier, wenn Sie tiefer in BEM einsteigen möchten.

Atomdesign

Atomdesign ist eine Methodik zum Erstellen von Designsystemen. Ähnlich wie bei der Chemie können Sie Ihre Komponentendatei (in diesem Szenario VUE Einzeldateikomponenten) unter Verwendung von Atomen , Molekülen und Organismen organisieren.

Atome

Atome sind die grundlegenden Bausteine ​​der Materie. Atome sind auf Web -Schnittstellen angewendet und sind unsere HTML -Tags wie eine Formularbezeichnung, eine Eingabe oder eine Schaltfläche.

Moleküle

Moleküle sind Gruppen von Atomen, die miteinander verbunden sind, und die kleinsten grundlegenden Einheiten einer Verbindung.

Organismen

Organismen sind Gruppen von Molekülen, die zu einem relativ komplexen, unterschiedlichen Abschnitt einer Grenzfläche verbunden sind.

Technische Fähigkeiten

Zunächst empfehle ich Ihnen dringend, einen Blick auf die Vue -Dokumentation zu werfen, insbesondere zu:

• Vue -Handler
• Vue Requisiten
• Vue -Computereigenschaften
• VUE Einzeldateikomponenten
• Vuex -Staat
• Vuex Getters
• Vuex -Mutationen
• Vue Router

Installieren

Sie können TIC-TAC-VUE-VUE -Klonation des Projekts installieren:

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

Installieren Sie dann NPM -Abhängigkeiten:

 npm install

Verwendung

Da dieses Projekt mit vite.js entwickelt wurde, können Sie seine eigenen integrierten CLI -Befehle verwenden, um die Anwendung zu bedienen, zu erstellen oder eine Vorschau zu haben.

Dev Server starten

 npm run dev

Kompiliert und minimiert für die Produktion

 npm run build

Vorschau der erstellten Anwendung

 npm run preview

FINTS und behebt Dateien

 npm run lint

Einsetzen

Um Ihre Bewerbung bereitzustellen, können Sie dem offiziellen Vite.js -Handbuch folgen.