Configurarea primului proiect Vue.js

Vue.js este un cadru JavaScript progresiv pentru construirea de interfețe cu utilizatorul și aplicații cu o singură pagină. Este foarte flexibil și ușor de integrat cu alte biblioteci sau proiecte existente. Acest ghid vă va ghida prin pașii pentru a configura primul proiect Vue.js folosind Vue CLI, un instrument puternic pentru schelele și gestionarea aplicațiilor Vue.

Cerințe preliminare

Înainte de a configura un proiect Vue.js, asigurați-vă că aveți următoarele instalate pe sistemul dvs.:

• Node.js și npm: Vue.js necesită instalarea Node.js și npm (Manager de pachete Node). Le puteți descărca de pe site-ul oficial Node.js.

Pasul 1: Instalați Vue CLI

Vue CLI (Command Line Interface) este un instrument care vă ajută să creați și să gestionați cu ușurință proiecte Vue.js. Pentru a instala Vue CLI la nivel global pe sistemul dvs., deschideți terminalul sau promptul de comandă și executați următoarea comandă:

npm install -g @vue/cli

Această comandă instalează Vue CLI la nivel global, permițându-vă să accesați comanda vue de oriunde în terminal.

Pasul 2: Creați un nou proiect Vue

Odată ce Vue CLI este instalat, puteți crea un nou proiect Vue.js rulând următoarea comandă:

vue create my-vue-app

Vi se va solicita să alegeți o presetare pentru proiectul dvs. Puteți fie să selectați presetarea implicită, care include Babel și ESLint, fie să selectați manual funcții precum Vue Router, Vuex, TypeScript și multe altele. Pentru începători, este recomandat să alegeți presetarea implicită apăsând Enter.

Vue CLI va crea apoi un nou folder numit my-vue-app și va configura structura proiectului cu toate fișierele și configurațiile necesare.

Pasul 3: Navigați la folderul Proiect

Odată creat proiectul, navigați la folderul proiectului folosind următoarea comandă:

cd my-vue-app

Acest lucru va schimba directorul de lucru al terminalului în folderul proiect Vue.js nou creat.

Pasul 4: Rulați serverul de dezvoltare

Pentru a vedea noua aplicație Vue.js în acțiune, porniți serverul de dezvoltare locală rulând:

npm run serve

Această comandă va porni un server de dezvoltare la http://localhost:8080 (sau alt port disponibil). Deschideți browserul web și navigați la această adresă URL pentru a vizualiza noua aplicație Vue.js.

Înțelegerea structurii proiectului

După crearea unui nou proiect Vue.js, veți vedea o structură de proiect bine organizată. Iată principalele fișiere și foldere:

• src: Acest folder conține codul sursă pentru aplicația ta Vue.js. Toate componentele, vederile și stilurile se află aici.
• public: Acest folder conține elemente statice, cum ar fi imagini, fonturi și fișierul index.html, care servește drept punct de intrare pentru aplicația dvs.
• src/main.js: Punctul de intrare principal pentru aplicația ta Vue.js. Acest fișier inițializează instanța Vue și o montează pe DOM.
• src/App.vue: Componenta rădăcină a aplicației dvs. Puteți modifica acest fișier pentru a schimba aspectul principal al aplicației dvs.
• src/components: Acest folder conține exemple de componente Vue precum HelloWorld.vue. Puteți adăuga noi componente aici și le puteți importa în aplicația dvs.

Pasul 5: Personalizați-vă aplicația

Puteți începe să vă personalizați aplicația Vue.js editând fișierul App.vue și creând noi componente. Iată un exemplu de componentă Vue simplă:

<template>
  <div>
    <h1>Welcome to My First Vue.js Project!</h1>
    <p>This is a simple Vue component.</p>
  </div>
</template>

<script>
export default {
  name: 'WelcomeComponent'
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

Salvați modificările și vedeți rezultatele instantaneu în browser, datorită funcției de reîncărcare la cald a Vue.

Concluzie

Felicitări! Ați configurat cu succes primul proiect Vue.js și ați învățat elementele de bază despre cum să creați și să rulați o aplicație Vue. Cu Vue CLI, aveți un instrument puternic care vă va ajuta să vă organizați, să dezvoltați și să vă gestionați proiectele Vue.js. De aici, puteți explora funcții mai avansate, cum ar fi Vue Router pentru rutare, Vuex pentru gestionarea statului și Composition API pentru o dezvoltare mai puternică și mai flexibilă.