Vuejs 3 Darija Review App الجزء الأول

منذ 4 أشهر imadbelasri Vuejs
VS

فهاد ل projet الجديد غادي نقادو Vuejs 3 Darija Review App ل App غادي تكون simple فيها فورم لي كتمكن المستخدم من إضافة التقييمات تعديلها أو حذفها.


نظرة سريعة بالفيديو


1- إضافة ل packages

أول حاجة زيد projet جديد غادي نخدموا ب vite لي هي واحد tool لي كتخليك تزيد les projets ديالك بطريقة سريعة وسهلة.

باش تزيد ل projet دير هاد ل commande :

npm create vite@latest my-vue-app -- --template vue

بدل my-vue-app بالإسم لي بغيتي.

منبعد ممكن ت modifier ل fichier package.json باش تزيد نفس les packages لي عندي ودير :

npm install 

الكود ديال الملف هو:

                                                    
                                                        //
{
  "name": "vuejs-review-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "bootstrap": "^5.2.0-beta1",
    "bootstrap-icons": "^1.8.2",
    "pinia": "^2.0.14",
    "uuid": "^8.3.2",
    "vue": "^3.2.25",
    "vue-router": "^4.0.15",
    "vue-star-rating": "^2.1.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}
                                                    
                                                

2- إضافة Bootstrap 5 & Bootstrap 5 Icons & Vue Router & Pinia

فل fichier main.js غادي نزيد Bootstrap 5 و Bootstrap 5 Icons و Vue Router و Pinia.

الكود ديال الملف بعد التعديل :

                                                        
                                                            //
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'bootstrap-icons/font/bootstrap-icons.css'

createApp(App)
    .use(createPinia())
    .use(router)
    .mount('#app')
                                                        
                                                    

3- إضافة Store ب Pinia

من بعد ف src زيد dossier stores فيه fichier index.js لي غادي يكون فيه store ديالنا لي قاديناه ب Pinia.

الكود ديال الملف هو :

                                                        
                                                            //
import { defineStore } from 'pinia'

export const useReviewStore = defineStore('reviews', {
    state: () => {
        return { 
            reviews:[]
        }
    },
    getters: {
        getReviews(state) {
            return state.reviews;
        },
        getReview(state) {
            return (reviewId) => state.reviews.find(review => review.id === reviewId);
        },
        reviewsLength(state){
            return state.reviews.length;
        },
        calculateReviewsAverage(state){
            return state.reviews.reduce((acc,review) => acc + review.rating / state.reviews.length ,0).toFixed(1);
        }
    },
    actions: {
        addReview(review) {
            this.reviews.unshift(review);
        },
        updateReview(item){
            let index = this.reviews.findIndex(review => review.id === item.id);
            this.reviews[index].name = item.name;
            this.reviews[index].message = item.message;
            this.reviews[index].rating = item.rating;
        },
        removeReview(reviewId) {
            this.reviews = this.reviews.filter(review => review.id !== reviewId);
        }
    },
})
                                                        
                                                    

4- إضافة Router

دائما ف src زيد dossier router فيه fichier index.js لي غادي يكونوا فيه les routes ديالنا.

الكود ديال الملف هو :

                                                        
                                                            //
import { createRouter, createWebHashHistory } from 'vue-router'
import Home from '../components/Home.vue'
import EditReview from '../components/EditReview.vue'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/edit/:id',
            name: 'edit',
            component: EditReview
        }
    ]
});

export default router