close

Inasakinisha Vue.js na Kuunda Mradi Wako wa Kwanza

Ili kusakinisha Vue.js, unaweza kufuata hatua zifuatazo:

Hatua ya 1: Unda saraka mpya ya mradi wako na ufungue terminal kwenye saraka hiyo.

Hatua ya 2: Tumia npm kusakinisha Vue CLI(Kiolesura cha Mstari wa Amri) kwa kutekeleza amri ifuatayo:

npm install -g @vue/cli


Hatua ya 3: Baada ya usakinishaji uliofanikiwa, unaweza kuunda mradi mpya wa Vue kwa kutumia amri ifuatayo:

vue create my-vue-project


Hatua ya 4: Chagua chaguo za usanidi wa mradi wako, ikiwa ni pamoja na kusakinisha Babel, ESLint, na Vichakataji awali vya CSS(si lazima).

Hatua ya 5: Mara tu mchakato wa kuunda mradi ukamilika, nenda kwenye saraka ya mradi kwa kutumia amri:

cd my-vue-project


Hatua ya 6: Tekeleza amri ifuatayo ili kuanza mradi wa Vue:

npm run serve


Baada ya mchakato wa kuanzisha kukamilika, utaona URL ya kufikia programu yako ya Vue kwenye kivinjari.

Mfano rahisi wa Vue.js:

Hebu tuunde faili mpya ya HTML na tuite jina index.html `. Katika faili hii, ongeza nambari ifuatayo:

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>

Katika mfano huu, tumeunda programu rahisi ya Vue yenye h1 lebo na kitufe. Wakati kifungo kinapobofya, ujumbe utabadilika.

Hifadhi index.html  faili na uifungue kwenye kivinjari. Utaona ujumbe wa awali kama "Hujambo Vue.js!". Unapobofya kitufe, ujumbe utabadilika kuwa "Ujumbe umebadilishwa kwa ufanisi!".

Huu ni mfano rahisi wa kukufanya uanze kutumia Vue.js. Unaweza kuchunguza vipengele vingi zaidi na uwezo mkubwa wa Vue.js huku ukitengeneza programu zako.