close

Shigar da Vue.js da Ƙirƙirar Aikin Farko naku

Don shigar da Vue.js, kuna iya bin matakan da ke ƙasa:

Mataki 1: Ƙirƙiri sabon kundin adireshi don aikin ku kuma buɗe tasha a waccan littafin.

Mataki 2: Yi amfani da npm don shigar da Vue CLI(Command Line Interface) ta hanyar aiwatar da umarni mai zuwa:

npm install -g @vue/cli


Mataki 3: Bayan nasarar shigarwa, zaku iya ƙirƙirar sabon aikin Vue ta amfani da umarni mai zuwa:

vue create my-vue-project


Mataki 4: Zaɓi zaɓuɓɓukan daidaitawa don aikinku, gami da shigar da Babel, ESLint, da CSS Pre-processors(na zaɓi).

Mataki na 5: Da zarar aikin ƙirƙirar aikin ya cika, kewaya cikin kundin aikin ta amfani da umarnin:

cd my-vue-project


Mataki 6: Gudun umarni mai zuwa don fara aikin Vue:

npm run serve


Bayan an gama aiwatar da farawa, zaku ga URL don samun damar aikace-aikacenku na Vue akan burauzar.

Misali mai sauƙi na Vue.js:

Bari mu ƙirƙiri sabon fayil ɗin HTML kuma mu sanya masa suna index.html `. A cikin wannan fayil, ƙara lambar mai zuwa:

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>

A cikin wannan misalin, mun ƙirƙiri aikace-aikacen Vue mai sauƙi tare da h1 tag da maɓalli. Lokacin da aka danna maɓallin, sakon zai canza.

Ajiye index.html  fayil ɗin kuma buɗe shi a cikin mai lilo. Za ku ga saƙon farko kamar "Hello Vue.js!". Lokacin da ka danna maɓallin, saƙon zai canza zuwa "An canza saƙo cikin nasara!".

Wannan misali ne mai sauƙi don farawa da Vue.js. Kuna iya bincika ƙarin fasalulluka da yawa da ƙarfi na Vue.js yayin haɓaka aikace-aikacenku.