Română

English

Română

English

Aspect

Vue ​

Ar trebui să creezi o componentă Vue principală numită App.vue ca punct de intrare al aplicației tale Vue. Codul tău Vue ar trebui să fie verificat prin linting folosind ESLint cu configurația recomandată pentru Vue.js.

Fișierul de intrare ​

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

Versiune ​

Rulează pe Node.js v20.0.0

Limbi suportate ​

Javascript

Framework de testare ​

Jest

Recomandări speciale și detalii de implementare ​

  • Vue Testing Library, o librărie construită peste @vue/test-utils, de testing library oficială pentru Vue.

Exemplu cu Vue Testing Library: ​

js
import { render, screen } from '@testing-library/vue'
import App from './App.vue'

describe('App', () => {
  test('Should display "Hello World!"', () => {
    render(App);

    expect(screen.getByText("Hello World!")).toBeInTheDocument();
  })
});

Nu uita să îți păstrezi întotdeauna componentele modulare și să folosești reactivitatea Vue, proprietățile calculate și directivele pentru o gestionare eficientă a datelor și manipulări DOM.

Librării incluse ​

Cum se depanează ​

Depanarea aplicațiilor Vue.js 3 este crucială pentru a asigura stabilitatea și corectitudinea. Utilizarea instrucțiunilor console.log() poate fi o metodă simplă, dar eficientă de a depana aplicațiile Vue.

Pași pentru depanare folosind console.log() ​

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

  2. Introdu instrucțiuni console.log(): Adaugă instrucțiuni console.log() înainte și după segmentul de cod pe care vrei să îl inspectezi, înregistrând date relevante, cum ar fi starea componentei, props-urile sau apelurile de metode.

  3. Verifică rezultatul testelor

  4. Folosește pictograma de depanare din zona de previzualizare: Fă clic pe pictograma de depanare din zona Preview pentru a verifica rezultatul din consolă sau verifică consola browserului tău.

  5. Analizează rezultatul: 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 despre cum să folosești console.log() pentru depanare în Vue.js 3:

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

<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
    console.log('Button clicked!'); // Log button click
    count.value++;
};

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