Vuejs 3 Darija Blog App الجزء الأول
فهاد ل projet الجديد غادي نقادو Vuejs 3 Darija Blog App ل App غادي تكون simple فيها فورم لي كتمكن المستخدم من إضافة ل posts من بعد ممكن للمستخدمين يزيدوا تعليقات أو إعجاب ب post معين.
نظرة سريعة بالفيديو
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": "vuejs3-blog-app-channel",
"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.3",
"moment": "^2.29.3",
"pinia": "^2.0.14",
"uuid": "^8.3.2",
"vue": "^3.2.25",
"vue-router": "^4.0.15"
},
"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 router from './router'
import App from './App.vue'
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- إضافة Post Store ب Pinia
من بعد ف src زيد dossier stores فيه زيد fichier usePostStore.js لي غادي يكون فيه store ديال ل posts لي قاديناه ب Pinia.
الكود ديال الملف هو :
//
import { defineStore } from 'pinia'
export const usePostStore = defineStore('posts', {
state: () => {
return {
posts: JSON.parse(localStorage.getItem('posts')) || []
}
},
getters: {
getPost(state){
return (postId) => state.posts.find(post => post.id === postId);
},
getPosts(state){
return state.posts;
}
},
actions: {
addPost(post){
this.posts.unshift(post);
localStorage.setItem('posts',JSON.stringify(this.posts));
}
}
})
4- إضافة Like Store ب Pinia
دائما ف dossier stores زيد fichier useLikeStore.js لي غادي يكون فيه store ديال ل likes لي قاديناه ب Pinia.
الكود ديال الملف هو :
//
import { defineStore } from 'pinia'
export const useLikeStore = defineStore('likes', {
state: () => {
return {
likes: JSON.parse(localStorage.getItem('likes')) || []
}
},
getters: {
getPostLikes(state){
return (postId) => state.likes.filter(like => like.post_id === postId).length;
}
},
actions: {
addLike(like){
this.likes.unshift(like);
localStorage.setItem('likes',JSON.stringify(this.likes));
}
}
})
5- إضافة Comment Store ب Pinia
دائما ف dossier stores زيد fichier useCommentStore.js لي غادي يكون فيه store ديال ل comments لي قاديناه ب Pinia.
الكود ديال الملف هو :
//
import { defineStore } from 'pinia'
export const useCommentStore = defineStore('comments', {
state: () => {
return {
comments: JSON.parse(localStorage.getItem('comments')) || []
}
},
getters: {
getPostcomments(state){
return (postId) => state.comments.filter(comment => comment.post_id === postId);
}
},
actions: {
addComment(comment){
this.comments.unshift(comment);
localStorage.setItem('comments',JSON.stringify(this.comments));
}
}
})