بناء تطبيق Vue 3 من الصفر للإنتاج: دليل المهندس الشامل خطوة بخطوة

# إعداد المشروع يدويًا بدون أدوات إنشاء جاهزة
mkdir vue3-production-app
cd vue3-production-app
npm init -y
npm install vue@next typescript @vue/compiler-sfc --save
npm install vite @vitejs/plugin-vue @types/node --save-dev

# إنشاء ملف tsconfig.json أساسي
cat > tsconfig.json <<EOF
{
 "compilerOptions": {
 "target": "ESNext",
 "module": "ESNext",
 "strict": true,
 "jsx": "preserve",
 "moduleResolution": "node",
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "baseUrl": ".",
 "paths": {
 "@/*": ["src/*"]
 }
 },
 "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}
EOF

# إنشاء ملف vite.config.ts
cat > vite.config.ts <<EOF
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [vue()],
 resolve: {
 alias: {
 '@': resolve(__dirname, './src')
 }
 },
 server: {
 port: 3000,
 strictPort: true
 },
 build: {
 outDir: 'dist',
 emptyOutDir: true,
 rollupOptions: {
 output: {
 manualChunks: {
 vue: ['vue'],
 vendor: ['axios', 'pinia']
 }
 }
 }
 }
})
EOF

# بنية المشروع المقترحة (Feature-based)
src/
├── assets/
│ ├── fonts/
│ ├── images/
│ └── styles/
│ ├── _variables.scss
│ ├── _mixins.scss
│ └── main.scss
├── features/
│ ├── auth/
│ │ ├── components/
│ │ │ ├── LoginForm.vue
│ │ │ └── RegisterForm.vue
│ │ ├── composables/
│ │ │ └── useAuth.ts
│ │ ├── services/
│ │ │ └── authService.ts
│ │ ├── stores/
│ │ │ └── authStore.ts
│ │ ├── types/
│ │ │ └── authTypes.ts
│ │ └── index.ts
│ ├── dashboard/
│ │ ├── components/
│ │ │ ├── StatsCard.vue
│ │ │ └── RecentActivity.vue
│ │ ├── composables/
│ │ │ └── useDashboard.ts
│ │ └── ...
├── shared/
│ ├── components/
│ │ ├── BaseButton.vue
│ │ ├── BaseInput.vue
│ │ └── BaseModal.vue
│ ├── composables/
│ │ └── useApi.ts
│ ├── directives/
│ │ └── v-focus.ts
│ ├── plugins/
│ │ └── i18n.ts
│ └── utils/
│ ├── dateUtils.ts
│ └── validationUtils.ts
├── App.vue
└── main.ts

// src/features/auth/stores/authStore.ts
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { useApi } from '@/shared/composables/useApi'
import type { User } from '@/features/auth/types/authTypes'

interface AuthState {
 user: User | null
 token: string | null
 isAuthenticated: boolean
 loading: boolean
 error: string | null
}

export const useAuthStore = defineStore('auth', () => {
 const api = useApi()
 const state = ref<AuthState>({
 user: null,
 token: localStorage.getItem('token') || null,
 isAuthenticated: false,
 loading: false,
 error: null
 })

 // Getters
 const getUser = computed(() => state.value.user)
 const isAuth = computed(() => state.value.isAuthenticated)
 const getToken = computed(() => state.value.token)
 const getError = computed(() => state.value.error)

 // Actions
 const login = async (email: string, password: string) => {
 state.value.loading = true
 state.value.error = null
 try {
 const resp await api.post('/auth/login', { email, password })
 state.value.user = response.data.user
 state.value.token = response.data.token
 state.value.isAuthenticated = true
 localStorage.setItem('token', response.data.token)
 // تحديث الـ Axios headers تلقائيًا
 api.setAuthToken(response.data.token)
 } catch (err) {
 state.value.error = err.response?.data?.message || 'فشل تسجيل الدخول'
 throw err
 } finally {
 state.value.loading = false
 }
 }

 const logout = () => {
 state.value.user = null
 state.value.token = null
 state.value.isAuthenticated = false
 localStorage.removeItem('token')
 api.setAuthToken(null)
 }

 const checkAuth = async () => {
 if (!state.value.token) return false
 try {
 const response = await api.get('/auth/me')
 state.value.user = response.data.user
 state.value.isAuthenticated = true
 return true
 } catch {
 logout()
 return false
 }
 }

 return {
 state,
 getUser,
 isAuth,
 getToken,
 getError,
 login,
 logout,
 checkAuth
 }
})

// src/shared/composables/useApi.ts
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
import { ref, type Ref } from 'vue'

interface ApiResponse<T> {
 data: T
 status: number
 statusText: string
 headers: any
 config: AxiosRequestConfig
 request?: any
}

interface ApiError extends Error {
 response?: {
 data: any
 status: number
 headers: any
 }
 request?: any
 config: AxiosRequestConfig
}

export function useApi(baseURL: string = import.meta.env.VITE_API_BASE_URL) {
 const api: AxiosInstance = axios.create({
 baseURL,
 timeout: 10000,
 headers: {
 'Content-Type': 'application/json',
 'Accept': 'application/json'
 }
 })

 // إضافة الـ Interceptor لإضافة الـ token إلى كل طلب
 api.interceptors.request.use((config) => {
 const token = localStorage.getItem('token')
 if (token) {
 config.headers.Authorization = `Bearer ${token}`
 }
 return config
 })

 // إضافة الـ Interceptor لمعالجة الأخطاء العامة
 api.interceptors.response.use(
 (response) => response,
 (error: ApiError) => {
 if (error.response?.status === 401) {
 // إعادة توجيه إلى صفحة تسجيل الدخول إذا كان الـ token غير صالح
 window.location.href = '/login'
 }
 return Promise.reject(error)
 }
 )

 const setAuthToken = (token: string | null) => {
 if (token) {
 api.defaults.headers.common['Authorization'] = `Bearer ${token}`
 } else {
 delete api.defaults.headers.common['Authorization']
 }
 }

 const request = <T>(config: AxiosRequestConfig): Promise<ApiResponse<T>> => {
 const source = axios.CancelToken.source()
 const requestConfig: AxiosRequestC {
 ...config,
 cancelToken: source.token
 }

 const response: Ref<ApiResponse<T> | null> = ref(null)
 const error: Ref<ApiError | null> = ref(null)
 const loading: Ref<boolean> = ref(true)

 api.request(requestConfig)
 .then((res: AxiosResponse<T>) => {
 response.value = {
 data: res.data,
 status: res.status,
 statusText: res.statusText,
 headers: res.headers,
 config: res.config,
 request: res.request
 }
 })
 .catch((err: ApiError) => {
 error.value = err
 })
 .finally(() => {
 loading.value = false
 })

 return {
 response,
 error,
 loading,
 cancel: () => source.cancel('Request canceled by user')
 }
 }

 return {
 api,
 setAuthToken,
 get: <T>(url: string, config?: AxiosRequestConfig) => request<T>({ method: 'get', url, ...config }),
 post: <T>(url: string, data?: any, config?: AxiosRequestConfig) => request<T>({ method: 'post', url, data, ...config }),
 put: <T>(url: string, data?: any, config?: AxiosRequestConfig) => request<T>({ method: 'put', url, data, ...config }),
 delete: <T>(url: string, config?: AxiosRequestConfig) => request<T>({ method: 'delete', url, ...config })
 }
}

// src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
import { useAuthStore } from '@/features/auth/stores/authStore'

const routes: RouteRecordRaw[] = [
 {
 path: '/',
 name: 'home',
 component: () => import('@/features/home/HomePage.vue'),
 meta: { requiresAuth: false }
 },
 {
 path: '/dashboard',
 name: 'dashboard',
 component: () => import('@/features/dashboard/DashboardPage.vue'),
 meta: { requiresAuth: true }
 },
 {
 path: '/login',
 name: 'login',
 component: () => import('@/features/auth/components/LoginForm.vue'),
 meta: { requiresAuth: false }
 }
]

const router = createRouter({
 history: createWebHistory(import.meta.env.BASE_URL),
 routes
})

// إضافة الـ Navigation Guard
router.beforeEach(async (to, from, next) => {
 const authStore = useAuthStore()
 const isAuthenticated = await authStore.checkAuth()

 if (to.meta.requiresAuth && !isAuthenticated) {
 next({ name: 'login' })
 } else if (to.name === 'login' && isAuthenticated) {
 next({ name: 'dashboard' })
 } else {
 next()
 }
})

export default router

<template>
 <div class="virtual-list-container">
 <RecycleScroller
 class="scroller"
 :items="items"
 :item-size="50"
 key-field="id"
 v-slot="{ item }"
 >
 <div class="item">
 {{ item.name }}
 </div>
 </RecycleScroller>
 </div>
</template>

 setup lang="ts">
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

interface Item {
 id: number
 name: string
}

const items: Item[] = Array.from({ length: 10000 }, (_, i) => ({
 id: i,
 name: `Item ${i}`
}))
</script>

<style scoped>
.virtual-list-container {
 height: 500px;
 overflow: hidden;
}

.scroller {
 height: 100%;
}

.item {
 height: 50px;
 padding: 10px;
 border-bottom: 1px solid #eee;
}
</style>

 setup lang="ts">
import { computed } from 'vue'
import { useMemo } from 'vue-use'

const items = ref([...]) // قائمة كبيرة من العناصر

// بدون memoization
const filteredItems = computed(() => {
 return items.value.filter(item => item.isActive).sort((a, b) => b.score - a.score)
})

// مع memoization
const memoizedFilteredItems = useMemo(() => {
 return items.value.filter(item => item.isActive).sort((a, b) => b.score - a.score)
}, [items.value])
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { visualizer } from 'rollup-plugin-visualizer'
import compression from 'vite-plugin-compression'

// https://vitejs.dev/config/
export default defineConfig({
 plugins: [
 vue(),
 // ضغط الملفات باستخدام gzip
 compression({
 algorithm: 'gzip',
 ext: '.gz'
 }),
 // إنشاء تقرير عن حجم الحزمة
 visualizer({
 open: true,
 gzipSize: true,
 brotliSize: true
 })
 ],
 resolve: {
 alias: {
 '@': resolve(__dirname, './src')
 }
 },
 build: {
 outDir: 'dist',
 emptyOutDir: true,
 // تقسيم الكود إلى chunks أصغر
 rollupOptions: {
 output: {
 manualChunks: {
 vue: ['vue'],
 pinia: ['pinia'],
 vendor: ['axios', 'vue-router', 'vue-virtual-scroller']
 }
 }
 },
 // تمكين source maps للإنتاج (مع الحذر)
 sourcemap: true,
 // تمكين minification
 minify: 'terser',
 terserOptions: {
 compress: {
 drop_console: true, // إزالة console.log في الإنتاج
 drop_debugger: true
 }
 }
 }
})

server {
 listen 443 ssl http2;
 server_name yourdomain.com;
 
 ssl_certificate /path/to/your/certificate.pem;
 ssl_certificate_key /path/to/your/private-key.pem;
 
 root /var/www/your-vue-app/dist;
 index index.html;
 
 location / {
 try_files $uri $uri/ /index.html;
 gzip_static on;
 brotli_static on;
 expires 1y;
 add_header Cache-Control "public";
 }
 
 location /api {
 proxy_pass http://your-backend-server;
 proxy_set_header Host $host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 proxy_set_header X-Forwarded-Proto $scheme;
 }
}