Sida Loo Isticmaalo Vue.js Si Loogu Dhiso Codsiyo Hore Ugu Fiican: Talooyin Qalab iyo Hage Waxqabad

In horumarinta hore ee casriga ah, Vue.js ayaa si weyn loogu soo dhoweeyay sababo la xiriira fudeydkiisa, dabacsanaantiisa iyo waxtarkiisa. Qoraalkan waxaan kuugu talin doonaa qaar ka mid ah qalabka iyo agabka waxtarka leh, si aad u hesho khibrad wanaagsan markaad isticmaalayso Vue.js, waxaana sidoo kale bixin doonaa qaar ka mid ah hababka ugu fiican iyo tillaabooyinka waxqabadka, si aad si degdeg ah ugu bilaabi karto.

Qaybta 1, Aasaaska Vue.js iyo Rakibaadda

1.1 Waa maxay Vue.js?

Vue.js waa qaab-dhismeed JavaScript ah oo loo isticmaalo dhisidda interfaces-ka isticmaale. Maktabadda aasaasiga ah ee Vue waxay diiradda saartaa lakabka muuqaalka, taasoo ka dhigaysa mid sahlan in lagu daro maktabado kale ama mashaariic hore u jiray. Intaa waxaa dheer, Vue waxay sidoo kale la jaanqaadi kartaa qalab casri ah iyo maktabadaha taageerada, waxayna taageertaa horumarinta codsiyada hal bog ah (SPA).

1.2 Rakibaadda Vue.js

Waxaad ku rakibi kartaa Vue.js siyaabo kala duwan, halkan waxaa ku yaal qaar ka mid ah hababka caanka ah:

• Isticmaalka CDN

  Ku dar koodhkan HTML faylkaaga si aad u keento Vue:

• Isticmaalka npm

  Waxaad isticmaali kartaa npm si aad u rakibto Vue.js:

  npm install vue
  

• Isticmaalka Vue CLI

  Vue CLI waa qalab rasmi ah oo ka caawiya inaad si degdeg ah u abuurto qaab-dhismeedka mashruuca. Ku rakib Vue CLI:

  npm install -g @vue/cli
  

  Abuur mashruuc cusub:

  vue create my-project
  

Qaybta 2, Qalabyo iyo Agabyo Waxtar Leh

2.1 Vue Router

Vue Router waa maktabadda rasmiga ah ee waddooyinka Vue.js, waxayna mas'uul ka tahay xakameynta hagida iyo maareynta waddooyinka, waa qalab aan laga maarmin oo loogu talagalay dhisidda codsiyada hal bog ah. Marka aad isticmaalayso Vue Router, waxaad u baahan tahay:

1. Ku rakib Vue Router:

   npm install vue-router
   

2. Mashruuca ku abuur hal tusaale waddo ah oo qeex waddooyinka:

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

3. Ku dar waddada tusaalaha Vue ee ugu weyn:

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router';
   
   new Vue({
     render: h => h(App),
     router
   }).$mount('#app');
   

2.2 Vuex

Vuex waa habka maareynta xaaladda loogu talagalay maareynta xaaladda codsiga, waxay ururisaa dhammaan xaaladaha qaybaha oo waxay si habboon u maareysaa isbeddelada xaaladda, waxay ku habboon tahay codsiyada adag. Tallaabooyinka isticmaalka Vuex waa sida soo socota:

1. Ku rakib Vuex:

   npm install vuex
   

2. Abuur hal dukaanka Vuex:

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

3. Ku dar dukaanka tusaalaha Vue ee ugu weyn:

   import Vue from 'vue';
   import App from './App.vue';
   import store from './store';
   
   new Vue({
     render: h => h(App),
     store
   }).$mount('#app');
   

2.3 Vue Devtools

Vue Devtools waa qalab debugging ah oo loogu talagalay Chrome iyo Firefox, waxay ka caawisaa horumariyeyaasha inay debug-gareeyaan codsiyada Vue.js, adigoo fiirinaya geedka qaybaha, isbeddelada xaaladda iyo qulqulka dhacdooyinka, waxaad si sahlan u ogaan kartaa dhibaatooyinka.

• Ku rakib Vue Devtools Chrome:
  1. Booqo bogga plugin-ka Vue Devtools Chrome.
  2. Guji "Ku dar Chrome".

Qaybta 3, Hababka Ugu Fiican

3.1 Horumarinta Qaybaha

Vue.js waxay dhiirrigelisaa horumarinta qaybaha. Adigoo kala qaybinaya codsiga qaybo yaryar oo dib loo isticmaali karo, waxaad kor u qaadi kartaa dayactirka iyo dib-u-isticmaalka koodhka. Tusaale aasaasi ah oo qayb ah:

  
  
# {{ title }}

    Increment
  

export default {
  data() {
    return {
      title: 'Hello Vue!',
    };
  },
  methods: {
    increment() {
      this.$emit('increment');
    }
  }
}

3.2 Isticmaalka API Isku-dhafan (Vue 3)

Haddii aad isticmaalayso Vue 3, waxaa lagu talinayaa inaad isticmaasho API isku-dhafan si aad u xoojiso habaynta koodhka iyo akhriska. API isku-dhafan waxay ka dhigeysaa loogaga maareynta xaaladda mid sahlan in dib loo isticmaalo, halkan waxaa ku yaal tusaale isticmaalaya API isku-dhafan:

  
  
# {{ title }}

    Increment
  

import { ref } from 'vue';

export default {
  setup() {
    const title = ref('Hello Vue!');
    const count = ref(0);

    const increment = () => {
      count.value++;
    };

    return {
      title,
      increment,
    };
  }
}

3.3 Hagaajinta Waxqabadka

Markaad isticmaalayso Vue.js si aad u horumariso codsiyada, fiiro gaar ah u yeelo waxqabadka:

• Dib-u-dhigida waddooyinka: Isticmaal soo dejinta firfircoon si aad u dib-u-dhigto qaybaha waddooyinka.

  const Home = () => import('./components/Home.vue');
  

• Isticmaalka qaybaha asyncronous: Vue waxay taageertaa qaybaha asyncronous, kala qaybi qaybaha qaybaha yaryar oo ku shub marka loo baahdo.

3.4 Tijaabinta

Inta lagu jiro horumarinta, qorista tijaabooyinka codsiga waxay kor u qaadi kartaa tayada koodhka. Ekosystem-ka Vue wuxuu leeyahay xalal tijaabo oo horumarsan, sida Vue Test Utils iyo Jest. Waxaad isticmaali kartaa Jest si aad u sameyso tijaabooyin unugyo iyo tijaabooyin dhammaan dhamaadka.

npm install --save-dev @vue/test-utils jest

Qaybta 4, Gunaanad

Vue.js waxay horumariyeyaasha siisaa qalab dabacsan oo awood leh, si wax ku ool ah loogu dhiso codsiyada hore ee casriga ah. Qoraalkan, waxaan ka wada hadalnay qaar ka mid ah qalabka iyo agabka waxtarka leh, waxaana bixinay qaar ka mid ah hababka ugu fiican si aad si fiican u isticmaasho Vue.js.

Haddii aad tahay bilowga Vue ama horumariye khibrad leh, waxaan rajeynayaa in waxyaabahan ay kaa caawin doonaan inaad si hufan u horumariso. Haddii aad rabto inaad wax badan ka ogaato tabaha iyo qalabka sare ee isticmaalka Vue, fadlan sii wad inaad la socoto doodaha tignoolajiyada iyo agabka bulshada.