close

Įdiekite Vue.js ir sukurkite pirmąjį projektą

Norėdami įdiegti Vue.js, galite atlikti šiuos veiksmus:

1 veiksmas: sukurkite naują savo projekto katalogą ir atidarykite terminalą tame kataloge.

2 veiksmas: naudokite npm, kad įdiegtumėte Vue CLI(komandinės eilutės sąsają), vykdydami šią komandą:

npm install -g @vue/cli


3 veiksmas: sėkmingai įdiegę galite sukurti naują Vue projektą naudodami šią komandą:

vue create my-vue-project


4 veiksmas: pasirinkite projekto konfigūracijos parinktis, įskaitant Babel, ESLint ir CSS išankstinių procesorių diegimą(pasirinktinai).

5 veiksmas: Kai projekto kūrimo procesas bus baigtas, eikite į projekto katalogą naudodami komandą:

cd my-vue-project


6 veiksmas: paleiskite šią komandą, kad paleistumėte Vue projektą:

npm run serve


Baigę paleisties procesą, pamatysite URL, kad galėtumėte pasiekti „Vue“ programą naršyklėje.

Paprastas Vue.js pavyzdys:

Sukurkime naują HTML failą ir pavadinkime jį index.html `. Šiame faile pridėkite šį kodą:

html  
<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js Example</title>  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
</head>  
<body>  
  <div id="app">  
    <h1>{{ message }}</h1>  
    <button @click="changeMessage">Change Message</button>  
  </div>  
  
  <script>  
    new Vue({  
      el: '#app',  
      data: {  
        message: 'Hello Vue.js!'  
      },  
      methods: {  
        changeMessage() {  
          this.message = 'Message changed successfully!';  
        }  
      }  
    });  
  </script>  
</body>  
</html>

Šiame pavyzdyje sukūrėme paprastą Vue programą su h1 žyma ir mygtuku. Paspaudus mygtuką, pranešimas pasikeis.

Išsaugokite index.html  failą ir atidarykite jį naršyklėje. Pamatysite pradinį pranešimą kaip "Hello Vue.js!". Kai paspausite mygtuką, pranešimas pasikeis į "Pranešimas sėkmingai pakeistas!".

Tai tik paprastas pavyzdys, kaip pradėti naudotis Vue.js. Kurdami programas galite ištirti daug daugiau Vue.js funkcijų ir galingų galimybių.