Vue.js Bilowga Hage: Laga soo bilaabo Aasaaska ilaa Farsamooyinka Faa'iidada leh

Vue.js waa qaab-dhismeed JavaScript ah oo loo isticmaalo dhisidda interfaces-ka isticmaale, waxaana si weyn loogu soo dhaweynayaa sababtoo ah fududeyntiisa, dabacsanaantiisa, iyo waxtarkiisa. Maqaalkan, waxaan ku siin doonaa hage dhamaystiran oo ku saabsan Vue.js oo loogu talagalay bilowga, kaas oo daboolaya aqoonta aasaasiga ah, dhisidda deegaanka, fikradaha aasaasiga ah, iyo farsamooyinka waxtarka leh, si aad si dhakhso ah ugu bilaabi karto horumarinta Vue.js.

1. Dhisidda Deegaanka

1.1 Hubi Deegaankaaga Horumarinta

Ka hor inta aanad bilaabin, fadlan hubi inaad rakibtay agabka soo socda:

• Node.js: Vue.js waxay ku tiirsan tahay deegaanka Node.js si loo dhiso loona horumariyo. Waxaad ka soo dejisan kartaa Bogga Rasmiga ah ee Node.js si aad u rakibto nooca ugu dambeeya.
• npm ama yarn: Node.js si otomaatig ah ayuu u rakibaa qalabka maareynta baakadaha npm, yarn waa doorasho kale oo caadi ah.

1.2 Abuur Mashruuc Vue

Isticmaal Vue CLI (qalabka khadka amarka) si aad u abuurto mashruuc cusub oo Vue ah. Tallaabooyinka abuurista waa sida soo socota:

1. Rakib Vue CLI:

   npm install -g @vue/cli
   

   ama isticmaal yarn:

   yarn global add @vue/cli
   

2. Abuur Mashruuc Cusub:

   vue create my-project
   

   Inta lagu jiro abuurista, khadka amarka wuxuu ku weydiin doonaa inaad doorato qaabeynta la dejiyay, waxaad dooran kartaa qaabeynta caadiga ah ama si gacanta ah u doorato.

3. Bilow Server-ka Horumarinta: Geli galka mashruucaaga oo bilow server-ka horumarinta:

   cd my-project
   npm run serve
   

   Fur biraawsarka, booqo http://localhost:8080, waxaad arki doontaa bogga soo dhaweynta Vue.

2. Fikradaha Aasaasiga ah ee Vue.js

2.1 Tusaalaha Vue

Mashruuc kasta oo Vue.js ah wuxuu ka bilaabmaa abuurista tusaale Vue ah:

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

HTML-ka, waxaad u baahan tahay inaad isticmaasho `` sida barta lagu xiro.

2.2 Tilmaamaha

Tilmaamaha ku jira Vue.js waa sifooyin khaas ah oo leh hore v-. Tilmaamaha ugu badan ee la isticmaalo waxaa ka mid ah:

• v-bind: Xiriirinta hantida firfircoon
• v-model: Xiriirinta xogta laba-dhinac ah
• v-if / v-else / v-show: Muuqaal shuruudaysan
• v-for: Muuqaalka liiska wareegaya

2.3 Qaybaha

Qaybaha waa sifo aasaasi ah oo ka mid ah Vue.js. Waxaad u kala qaybin kartaa codsigaaga qaybo badan oo la isticmaali karo. Tusaale ahaan, abuur qayb fudud oo HelloWorld ah:

Vue.component('hello-world', {
  template: '

# Hello World!

'
});

Kadibna ku isticmaal HTML:

3. Farsamooyinka Waxtarka leh

3.1 Isticmaalka Vue Router si loo maareeyo waddooyinka

Codsiyada hal bog ah, maareynta waddooyinka waa mid aan la iska indho tiri karin. Waxaad isticmaali kartaa Vue Router si aad u maareyso navigaashinka codsiga. Tusaale fudud oo qaabeynta ah:

1. Rakib Vue Router:

   npm install vue-router
   

2. Qaabeynta Waddooyinka: Ku dejiso waddooyinka src/router/index.js:

   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from '@/components/Home.vue';
   import About from '@/components/About.vue';
   
   Vue.use(Router);
   
   export default new Router({
     routes: [
       { path: '/', component: Home },
       { path: '/about', component: About }
     ]
   });
   

3. Isticmaal Waddooyinka Codsiga Guud: Ku dar aragtida waddooyinka src/App.vue:

3.2 Maareynta Xaaladda: Isticmaalka Vuex

Marka codsigaagu noqdo mid adag, maareynta xaaladda waxay noqon doontaa mid aad muhiim u ah. Markaas waxaad ka fiirsan kartaa isticmaalka Vuex. Tusaale fudud:

1. Rakib Vuex:

   npm install vuex
   

2. Qaabeynta Vuex: Ku dejiso xaaladda src/store/index.js:

   import Vue from 'vue';
   import Vuex from 'vuex';
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
     state: {
       count: 0
     },
     mutations: {
       increment(state) {
         state.count++;
       }
     }
   });
   

3. Isticmaal Vuex Qaybaha:

   new Vue({
     store,
     computed: {
       count() {
         return this.$store.state.count;
       }
     },
     methods: {
       increment() {
         this.$store.commit('increment');
       }
     }
   });
   

3.3 Talooyinka Maktabadda Qaybaha

Si kor loogu qaado waxtarka horumarinta, waxaa lagu talinayaa in la isticmaalo maktabado qaybo hore loo diyaariyey. Qaar ka mid ah maktabadaha qaybaha Vue ee caanka ah waxaa ka mid ah:

• Vuetify: Maktabadda qaybaha ku saleysan Naqshad Maaddo.
• Element UI: Maktabadda qaybaha loogu talagalay horumariyeyaasha, naqshadeeyayaasha, iyo maareeyayaasha alaabta.
• Ant Design Vue: Hirgelinta qaybaha Vue ee ku saleysan Ant Design.

4. Gunaanad

Maqaalkani wuxuu siiyay bilowga Vue.js aqoonta aasaasiga ah iyo farsamooyinka waxtarka leh. Waxaan rajeyneynaa in maqaalkan, aad si dhakhso ah u bilaabi karto, oo aad ku dabaqi karto Vue.js mashruucyada dhabta ah. Haddii aad rabto inaad si qoto dheer u barato Vue.js, waxaad tixraaci kartaa dukumentiyada rasmiga ah iyo kheyraadka bulshada.

Ku soo dhawoow inaad sii baarto qaab-dhismeedkan xiisaha leh ee hore, bilow inaad abuurto mashruucaaga xiga!