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


فالدرس الحادي عشرمن دورة  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>