close

L-installazzjoni ta' Vue.js u l-ħolqien tal-Ewwel Proġett Tiegħek

Biex tinstalla Vue.js, tista' ssegwi l-passi hawn taħt:

Pass 1: Oħloq direttorju ġdid għall-proġett tiegħek u iftaħ it-terminal f'dak id-direttorju.

Pass 2: Uża npm biex tinstalla Vue CLI(Command Line Interface) billi tħaddem il-kmand li ġej:

npm install -g @vue/cli


Pass 3: Wara l-installazzjoni b'suċċess, tista 'toħloq proġett Vue ġdid billi tuża l-kmand li ġej:

vue create my-vue-project


Pass 4: Agħżel għażliet ta 'konfigurazzjoni għall-proġett tiegħek, inkluż l-installazzjoni ta' Babel, ESLint, u CSS Pre-proċessuri(mhux obbligatorju).

Pass 5: Ladarba l-proċess tal-ħolqien tal-proġett ikun lest, innaviga fid-direttorju tal-proġett billi tuża l-kmand:

cd my-vue-project


Pass 6: Mexxi l-kmand li ġej biex tibda l-proġett Vue:

npm run serve


Wara li jitlesta l-proċess tal-istartjar, se tara URL biex taċċessa l-applikazzjoni Vue tiegħek fuq il-browser.

Eżempju sempliċi ta' Vue.js:

Ejja noħolqu fajl HTML ġdid u semmieh index.html `. F'dan il-fajl, żid il-kodiċi li ġej:

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>

F'dan l-eżempju, ħloqna applikazzjoni Vue sempliċi b'tikketta h1 u buttuna. Meta l-buttuna tiġi kklikkjata, il-messaġġ jinbidel.

Issejvja l index.html  -fajl u iftaħ fil-browser. Se tara l-messaġġ inizjali bħala "Hello Vue.js!". Meta tikklikkja l-buttuna, il-messaġġ jinbidel għal "Messaġġ mibdul b'suċċess!".

Dan huwa biss eżempju sempliċi biex tibda b'Vue.js. Tista' tesplora ħafna aktar karatteristiċi u kapaċitajiet qawwija ta' Vue.js waqt li tiżviluppa l-applikazzjonijiet tiegħek.