close

Namestitev Vue.js in ustvarjanje vašega prvega projekta

Če želite namestiti Vue.js, sledite spodnjim korakom:

1. korak: Ustvarite nov imenik za svoj projekt in odprite terminal v tem imeniku.

2. korak: uporabite npm za namestitev Vue CLI(vmesnik ukazne vrstice), tako da zaženete naslednji ukaz:

npm install -g @vue/cli


3. korak: Po uspešni namestitvi lahko ustvarite nov projekt Vue z naslednjim ukazom:

vue create my-vue-project


4. korak: izberite možnosti konfiguracije za svoj projekt, vključno z namestitvijo predprocesorjev Babel, ESLint in CSS(izbirno).

5. korak: Ko je postopek ustvarjanja projekta končan, se pomaknite v imenik projekta z ukazom:

cd my-vue-project


6. korak: Zaženite naslednji ukaz, da zaženete projekt Vue:

npm run serve


Ko je postopek zagona končan, boste v brskalniku videli URL za dostop do vaše aplikacije Vue.

Preprost primer Vue.js:

Ustvarimo novo datoteko HTML in jo poimenujmo index.html `. V to datoteko dodajte to kodo:

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>

V tem primeru smo ustvarili preprosto aplikacijo Vue z h1 oznako in gumbom. Ko kliknete gumb, se sporočilo spremeni.

Shranite index.html  datoteko in jo odprite v brskalniku. Začetno sporočilo boste videli kot "Hello Vue.js!". Ko kliknete gumb, se sporočilo spremeni v "Sporočilo uspešno spremenjeno!".

To je le preprost primer za lažji začetek uporabe Vue.js. Med razvijanjem aplikacij lahko raziščete veliko več funkcij in zmogljivih zmogljivosti Vue.js.