دورة vue js للمبتدئين الدرس الحادي عشر

منذ 5 سنوات imadbelasri Vuejs
VS

فالدرس الحادي عشرمن دورة  vue js للمبتدئين غادي نبداو فواحد ل projet عبارة عن gestionnaire de dépenses يعني حاسبة ديال المصاريف.
فغادي نشوفوا هاد المرة كيفاش نخدم ب vue cli لي كتمكني باش نخدم ب vue js coté serveur.
يعني غادي يكون عندنا ل projet ف serveur فغادي نشوفوا كيفاش نزيدو vue cli منبعد غادي نزيدو ل projet ديالنا. 


1- كيفيفة تثبيت vue cli

لتثبيت vue cli كنمشي ل cmd كنفتح وكندير ل commande لي كنشوف فالصورة :



منبعد فاش كتزاد كن créer projet جديد كتزيدو فلبلاصة فين
بغيتي 
كتدير هاد ل commande :

vue create depenses 

إسم ل projet هو depenses منبعد غادي تفتحو فل editeur texte ديالك غادي تمشي ل src وغادي تمسح الملفات لي كاينين تما.

فداخل ل src غادي تزيد ملف جديد سميه App.vue فيه غادي نزيد الكود لي فيه template لي سبق شفناها قبل لي فيها الكود html ثم كاين script لي فيها الكود javascript فكنعطي اسم للملف لي هو App منبعد عندي ل objet data لي هنا تحول ل fonction كت retourner name.
ثم كاين style لي هي الجزء لي فيه css.

الكود لي زدنا هو :



                                                    
                                                        //App.vue

<template>
     <div>
        <div class="container">
            <h1 class="text-danger text-center mt-2">{{name}}</h1>
        </div>
     </div>
</template>


<script>    
    export default{
        name : 'App',
        data(){
            return{
                name : 'Gestion de dépenses'
            }
        },
    }
</script>



<style scoped>
    
</style>
                                                    
                                                

2- إضافة les components

فغادي نزيدو des components لي غادي نخدموا بيهم غادي نمشي ل src غادي نزيد dossier سميه components.
فيه غادي نزيد ملف سميه Gains.vue و Depenses.vue منبعد ف Gains.vue غادي نزيد هاد الكود لي هو تقريبا نفس الكود لي زدنا ف App.vue فقط العنوان لي مبدل : 

                                                        
                                                            //Gains.vue

<template>
    <div>
        <h3 class="text-info">Gains</h3>
        <hr>
    </div>
</template>


<script>
    export default{
        name : 'Gains',
        data(){
            return {

            }
        }
    }
</script>

<style scoped>

</style>
                                                        
                                                    

3- إضافة les components تتمة

فدائما ف dossier components غادي نزيدو الكود ديال Depenses.vue  لي هو تقريبا نفس الكود لي زدنا ف Gains.vue فقط العنوان لي مبدل : 

                                                        
                                                            //Depenses.vue

<template>
    <div>
        <h3 class="text-info">Dépenses</h3>
        <hr>
    </div>
</template>


<script>
    export default{
        name : 'Depenses',
        data(){
            return {

            }
        }
    }
</script>

<style scoped>

</style>
                                                        
                                                    

دروس ذات صلة

VS

دورة vue js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة vue js للمبتدئين غادي نشوفوا واحد المقدمة على vuejs من بعد غادي نشوفو كيفاش...


VS

دورة vuejs للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة vuejs للمبتدئين غادي نشوفوا كيفاش نزيدو les directives ف vue js ف les dire...


VS

دورة vuejs للمبتدئين الدرس الثالث

فهاد الدرس الثالت من دورة vuejs للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا المزيد من les di...


VS

دورة VUEJS للمبتدئين الدرس الرابع

فهاد الدرس الرابع من دورة VUEJS للمبتدئين غادي نشوفوا كيفاش نزيدو les méthodes...


VS

دورة VUEJS للمبتدئين الدرس الخامس

فهاد الدرس الخامس من دورة vue js للمبتدئين غادي نشوفوا كيفاش نقادو آلة حاسبة ولي غادي تكون تطبيق لدا...


VS

دورة VUE JS للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة VUE JS للمبتدئين غادي نكملو الألة الحاسبة ديالنا فغادي نشوفوا كيفاش غادي ن...


VS

دورة VUE JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا des directives آخرين...


VS

دورة VUE JS للمبتدئين الدرس الثامن

فهاد الجزء الثمن من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا واحد الحاجة مهمة ف...


VS

دورة vue js للمبتدئين الدرس التاسع

فهاد الدرس التاسع من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد لحاج...


VS

دورة VUE JS للمبتدئين الدرس العاشر

دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد ل propriété وحدة اخرى لي هي watch....