Sunteți interesat de Front End Development?

Dacă da, atunci această postare este pentru tine!

Pentru a începe cu Vue.js, trebuie să cunoașteți HTML, CSS, JavaScript, știința rachetelor, fizica nucleară, teoria cuantică etc …

Hmm? …

Nu chiar. Doar HTML, CSS și JavaScript sunt suficient de bune pentru a începe cu Vue.js.

Această postare va acoperi cum să creați cu ușurință o aplicație Vue.js simplă și va explica structura de dosare a aplicației create. De asemenea, vom crea o componentă simplă Vue.js.

Deci sa începem.

Condiții prealabile

Instalați Node.js dacă nu este deja prezent

Aveți nevoie de Node.js, deoarece bibliotecile necesare pentru Vue sunt descărcate folosind managerul de pachete nod (npm). A se referi la https://nodejs.org/en/ pentru a instala Node.js.

Instalați Vue CLI

Instalați Vue CLI utilizând următoarea comandă:

npm install -g @vue/cli

Vue CLI vă ajută să creați cu ușurință un proiect Vue.js. Deși se numește CLI, are și o interfață de utilizare pentru a crea proiectul pe care îl voi acoperi mai jos.

Creați proiectul

Tastați următoarea comandă în promptul de comandă:

vue ui

Aceasta va deschide următorul ecran în browser:

O introducere rapida la Vuejs

Click pe Crea. Apoi introduceți destinația în care ar trebui creat proiectul.

1611385267 650 O introducere rapida la Vuejs

Apoi faceți clic pe Creați un nou proiect aici.

1611385267 45 O introducere rapida la Vuejs

Aceasta va deschide următorul ecran:

1611385268 804 O introducere rapida la Vuejs

Introduceți folderul proiectului ca sample-vue-app și faceți clic pe Următor →.

În ecranul următor, selectați presetare implicită, așa cum se arată în imaginea de mai jos. Pentru această postare, presetare implicită este cel mai simplu de început.

1611385268 689 O introducere rapida la Vuejs

În cele din urmă, faceți clic pe Creați un proiect

Pentru a testa dacă proiectul este bine configurat, accesați folderul proiectului și porniți aplicația folosind următoarele comenzi:

cd sample-vue-app
npm run serve

Aplicația rulează localhost: 8080. Imaginea de mai jos arată cum arată aplicația în browser:

1611385269 297 O introducere rapida la Vuejs

Felicitări, ați creat primul dvs. proiect Vue.js!

Dar așteaptă un minut, proiectul are multe fișiere și foldere care au fost create automat.

Este cu adevărat necesar să știm ce înseamnă aceste fișiere?

Cunoașterea lor va ajuta cu siguranță atunci când codul se comportă într-un mod ciudat, ceea ce se întâmplă adesea în lumea dezvoltatorilor.

Structura folderului aplicației

1611385269 460 O introducere rapida la Vuejs
  1. package.json: Acest fișier are toate dependențele nodului.
  2. public / index.html: Acesta este primul fișier care se încarcă la pornirea aplicației. De asemenea, acest fișier are următorul fragment de cod <div id=”app”></div>. Toate componentele sunt încărcate în acest div cu aplicația id.
  3. src / main.js: Acesta este fișierul în care este creată Vue Instance. Acest fișier are următorul fragment de cod new Vue({ render: h => h(App)}).$mount(‘#app’). Acest fragment îl spunela Componenta aplicației trebuie încărcată într-un element cu id app (care este elementul div).
  4. src / App.vue: Acest fișier corespunde fișierului Aplicație componentă care acționează ca un container pentru toate celelalte componente. Are o șablon pentru HTML cod, are un scenariu pentru JavaScript cod și are un stil pentru CSS.
  5. src / components: Aici vor fi stocate toate componentele pe care le dezvoltați. Toate componentele vor avea un șablon, script și etichete de stil pentru HTML, JavaScript și respectiv cod CSS.
  6. dist: Acesta este folderul în care sunt stocate fișierele construite. Pentru a obține acest folder, rulați comanda npm run build. Când se execută această comandă, codul este minimizat și grupat și stocat în folderul dist. Codul din acest folder este, în general, implementat în producție.

Creați-vă prima componentă

Creați un fișier numit ca Întâi.vue interior src / components. Acest fișier va avea HTML, JavaScript și CSS. Să le adăugăm pe rând. Tot codul din această secțiune aparține Întâi.vue fişier. Întâi.vue va fi al nostru Componenta Vue

CSS

<style scoped>
.demo {
    background-color: cyan;
}
</style>

Acesta este CSS de bază. Parametrul cu scop în <style scoped> înseamnă că CSS se aplică numai acestei componente.

JavaScript

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

Nume parametrul indică numele componentei care este Primul.

recuzită parametrul indică intrare la această componentă. Aici vom avea o intrare numită ca msg care este de tip Şir.

HTML

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

{{msg}} este modul în care parametrul de intrare la Vue Componenta poate fi accesată în HTML cod.

Cod complet pentru prima componentă

Acesta este conținutul fișierului First.vue:

<template>
    <div class="demo">
    <h1>{{ msg }}</h1>
    </div>
</template>

<script>
export default {
    name: 'First',
    props: {
    msg: String
    }
}
</script>

<style scoped>
.demo {
    background-color: cyan;
}
</style>

Super, componenta este acum creată! ?

Rulați aplicația acum folosind npm run serve și veți vedea ecranul de mai jos:

1611385270 255 O introducere rapida la Vuejs

Așteptați un minut, nu este aceeași ieșire ca înainte. Unde este componenta pe care tocmai am creat-o?

Problema este că am creat componenta, dar nu am folosit-o niciodată. Să folosim acum această componentă.

Utilizarea componentei

Să adăugăm această componentă la principal Aplicație componentă. Iată codul actualizat pentru App.vue:

<template>
  <div id="app">
    <img alt="Vue logo" src="https://www.freecodecamp.org/news/a-quick-introduction-to-vue-js-72937ee8880d/./assets/logo.png">
    <First msg="First Component"/>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import First from './components/First.vue'
export default {
  name: 'app',
  components: {
    First
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. Primul componenta trebuie importată în Aplicație componentă. Acest lucru se face cu comanda import First from ‘./components/First.vue’
  2. Apoi, în JavaScript, trebuie să menționăm că Aplicație componenta va folosi Primul Componenta. Acest lucru este realizat de fragmentul de cod components: {First}
  3. În cele din urmă, trebuie să folosim Primul componentă în Aplicație componentă. Acest lucru se face în șablonul HTML folosind fragmentul de cod <First msg=”First Component”/>
  4. Aici msg este parametrul de intrare al Primul Componenta și Valoarea msg este trimis de la Aplicație Componenta

Acum rulați aplicația folosind npm run serve și veți vedea rezultatul de mai jos:

1611385270 146 O introducere rapida la Vuejs

Cod

Click aici pentru a obține codul afișat aici din depozitul GitHub. GitHub repo are instrucțiunile privind clonarea și rularea codului.

Click aici pentru a vedea cum arată aplicația. A fost implementat folosind paginile Github.

Felicitări?

Acum ați construit cu succes prima aplicație Vue.js. De asemenea, ați învățat cum să creați o componentă foarte simplă. În următoarea mea postare pe Vue.js, voi acoperi mai multe concepte. Rămâneți aproape!

Referințe

Vue.js: https://vuejs.org/v2/guide/

Vue CLI: https://cli.vuejs.org/guide/

Despre autor

Ador tehnologia și urmăresc progresele în tehnologie. De asemenea, îmi place să îi ajut pe ceilalți cu orice cunoștințe pe care le am în spațiul tehnologic.

Nu ezitați să vă conectați cu mine pe contul meu LinkedIn https://www.linkedin.com/in/aditya1811/

Poți să mă urmărești și pe twitter https://twitter.com/adityasridhar18

Site-ul meu: https://adityasridhar.com/

Un ghid rapid pentru a vă ajuta să înțelegeți și să creați aplicații Angular 6

Un ghid rapid pentru a vă ajuta să înțelegeți și să creați aplicații ReactJS