Anan ga cikakken jagorar mataki-mataki tare da takamaiman misalan lamba don gina TodoList aikace-aikace tare da Vue.js:
Mataki 1: Saita Aikin
Fara da ƙirƙirar sabon Vue.js aiki ta amfani da Vue CLI. Bude tashar ku kuma gudanar da umarni mai zuwa:
Wannan zai haifar da sabon kundin adireshi da ake kira todo-list-app
tare da ainihin tsarin aikin da abin dogaro.
Mataki 2: Ƙirƙirar TodoList Component
A cikin src
babban fayil, ƙirƙirar sabon fayil mai suna TodoList.vue
. Wannan zai zama babban bangaren aikace TodoList -aikacen.
A cikin TodoList.vue
:
Mataki 3: Ƙirƙirar da TodoItem Component
A cikin src
babban fayil, ƙirƙirar sabon fayil mai suna TodoItem.vue
. Wannan zai zama bangaren yara da ke da alhakin samar da abubuwan da za su yi na mutum ɗaya.
A cikin TodoItem.vue
:
Mataki 4: Ana ɗaukaka TodoList Component
A cikin TodoList.vue, sabunta sashin samfuri don yin TodoItem s ta amfani da v-don umarni.
A cikin TodoList.vue
:
Mataki 5: Gwada Aikace- TodoList aikacen
Don gwada TodoList aikace-aikacen, buɗe fayil ɗin "src/App.vue" kuma maye gurbin abubuwan da ke akwai tare da lambar mai zuwa:
Mataki 6: Gudanar da Aikace-aikacen
Ajiye duk canje-canje kuma fara uwar garken ci gaba ta hanyar gudanar da umarni mai zuwa a cikin tasha:
Ziyarci http://localhost:8080
mai binciken gidan yanar gizon ku don ganin TodoList aikace-aikacen yana aiki.
Wannan misalin yana nuna ainihin aikin a
TodoList aikace-aikace ta amfani da Vue.js. Masu amfani za su iya ganin jerin abubuwan todo, yi musu alama kamar yadda aka kammala, share su, da ƙara sabbin abubuwa ta amfani da sigar da aka bayar. Ana sarrafa yanayin abubuwan todo a cikin TodoList sashin, yayin da kowane abin todo ke yin amfani da TodoItem abun.
Lura cewa wannan sauƙaƙan aiwatarwa ne, kuma zaku iya tsarawa da haɓaka aikace-aikacen gaba bisa takamaiman bukatunku.