Română

English

Română

English

Aspect

Vue (TypeScript) ​

Ar trebui să creezi un component Vue principal numit App.vue ca punct de intrare al aplicației tale Vue. Codul tău Vue ar trebui să fie verificat (linted) folosind ESLint cu configurația recomandată pentru Vue.js și TypeScript.

Fișier de intrare ​

Fișierul de intrare pentru acest șablon trebuie să fie unul dintre următoarele: index.ts sau main.ts. Primul care este găsit va fi utilizat ca punct de intrare.

Versiune ​

Rulează pe Node.js v20.0.0

Limbi suportate ​

TypeScript

Cadru de testare ​

Jest

Precizări speciale și detalii de implementare ​

  • Vue Testing Library, o bibliotecă construită peste @vue/test-utils, biblioteca oficială de testare pentru Vue.

Exemplu cu Vue Testing Library: ​

ts
import "@testing-library/jest-dom/jest-globals";

import { render } from "@testing-library/vue";
import { describe, expect, it } from "@jest/globals";
import { screen } from "@testing-library/dom";

import HelloWorld from "./App.vue";

describe("HelloWorld", () => {
  it("renders Hello, World!", () => {
    render(HelloWorld);
    expect(screen.getByText("Hello, World!")).toBeInTheDocument();
  });
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești reactivitatea, proprietățile calculate și directivele Vue pentru o gestionare eficientă a datelor și manipulări ale DOM-ului. Folosește tipuri și interfețe TypeScript pentru o mai bună siguranță a tipurilor (type safety).

Biblioteci incluse ​

Cum să depanezi ​

Depanarea aplicațiilor Vue.js 3 cu TypeScript este esențială pentru a asigura stabilitatea și corectitudinea acestora. Utilizarea instrucțiunilor console.log() poate fi o metodă simplă, dar eficientă de depanare a aplicațiilor Vue.

Pași pentru depanare folosind log-uri în consolă ​

  1. Identifică zona cu probleme: Localizează componenta sau metoda Vue unde suspectezi că se află problema.

  2. Introdu instrucțiuni console.log(): Introdu instrucțiuni console.log() înainte și după segmentul de cod pe care dorești să îl inspectezi, înregistrând date relevante precum starea componentei, props sau apelurile de metode.

  3. Verifică output-ul rezultatelor testelor tale

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare (debug) din zona Preview pentru a verifica output-ul consolei sau verifică consola browserului tău.

  5. Analizează output-ul: Examinează datele înregistrate pentru a înțelege fluxul aplicației tale Vue și pentru a identifica orice comportamente neașteptate sau erori.

Iată un exemplu de utilizare a console.log() pentru depanare în Vue.js 3 cu TypeScript:

vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const count: Ref<number> = ref(0);

const increment = (): void => {
  console.log("Button clicked!");
  count.value++;
};

console.log("Component initialized."); // Log component initialization
</script>