Vuejs 3 Darija Review App الجزء الأول
فهاد ل 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