چطور یک پروژه Vue.js را از صفر تا صد راه‌اندازی کنیم؟

شروع یک پروژه جدید با یک فریم‌ورک جاوااسکریپتی، مخصوصاً برای توسعه‌دهندگانی که در ابتدای مسیر هستند، معمولاً با پرسش‌ها و سردرگمی‌هایی همراه است. Vue.js یکی از گزینه‌هایی‌ست که به‌دلیل سادگی، انعطاف‌پذیری و جامعه‌ی پویای خود توانسته جایگاه ویژه‌ای در میان ابزارهای توسعه فرانت‌اند پیدا کند. اما داشتن یک فریم‌ورک خوب کافی نیست؛ مهم این است که بدانیم چطور باید از آن به‌درستی استفاده کنیم.

هدف این مطلب، ارائه‌ی یک راهنمای جامع برای راه‌اندازی و ساخت یک پروژه Vue.js از صفر تا مرحله‌ی نهایی است. در این مسیر، با ابزارهایی مانند create-vue و Vue CLI، ساختار فایل‌ها و کامپوننت‌ها، استفاده از Vue Router برای مسیردهی، مدیریت وضعیت با Pinia و Vuex، و در نهایت اجرای پروژه و تولید نسخه‌ی بیلد شده آشنا می‌شویم.

اگر به‌دنبال درکی روشن و کاربردی از چرخه‌ی کامل توسعه در Vue هستید—از تصمیم‌گیری اولیه تا آماده‌سازی پروژه برای انتشار—این مطلب برای شما نوشته شده است.

همچنین اگر به یادگیری Vue.js علاقه دارید و می‌خواهید به‌صورت کامل با آن آشنا شوید پیشنهاد می‌کنم که مسیر یادگیری Vue.js را مشاهده کنید. 

گام اول: نصب Node.js و بررسی پیش‌نیازها

برای راه‌اندازی Vue.js، ابتدا باید Node.js روی سیستم شما نصب باشد. این ابزار برای اجرای جاوااسکریپت در خارج از مرورگر استفاده می‌شود و همراه خود npm (مدیر بسته‌ها) را نیز نصب می‌کند.

برای بررسی نصب بودن Node.js:

node -v
npm -v

اگر خروجی نسخه‌ها را دیدید، آماده‌اید برای گام بعدی.

گام دوم: ایجاد پروژه Vue با create-vue

ابزار پیشنهادی Vue برای شروع پروژه‌های جدید، create-vue است که از Vite استفاده می‌کند و سرعت بی‌نظیری در توسعه دارد.

برای نصب و ایجاد پروژه:

npm create vue@latest

در طول فرآیند نصب، از شما سؤال‌هایی درباره استفاده از TypeScript ،Vue Router ،Pinia، تست، ESLint و ... پرسیده می‌شود. می‌توانید بر اساس نیازتان انتخاب کنید.

پس از ایجاد پروژه، وارد دایرکتوری شوید:

cd my-vue-app
npm install
npm run dev

این دستور پروژه را در حالت توسعه اجرا می‌کند و آدرس محلی (مثلاً http://localhost:5173) برای مشاهده برنامه فراهم می‌شود.

گام سوم: بررسی ساختار پروژه Vue

بعد از راه‌اندازی پروژه، ساختار آن چیزی شبیه به این است:

src/
├── assets/
├── components/
├── views/
├── App.vue
├── main.js

فایل main.js

این فایل نقطه‌ی شروع اپلیکیشن شماست و Vue را روی عنصر DOM سوار می‌کند.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

در این کد، ابتدا اپلیکیشن Vue ساخته می‌شود و سپس روی یک المنت HTML با id مشخص (#app) mount می‌شود.

فایل App.vue

این فایل، ریشه‌ی همه‌ی کامپوننت‌هاست و معمولاً حاوی <router-view> یا محتوای اصلی سایت است.

<template>
  <div id="app">
    <h1>سلام Vue!</h1>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  text-align: center;
}
</style>

این ساختار همان چیزی است که به آن کامپوننت تک‌فایلی (SFC) می‌گویند: شامل template، script و style در یک فایل.

گام چهارم: ساخت کامپوننت‌ها

تمام قطعات قابل استفاده مجدد در Vue، به شکل کامپوننت ساخته می‌شوند. فرض کنید بخواهید یک پیام ساده نمایش دهید:

<!-- components/Message.vue -->
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

سپس این کامپوننت را در App.vue یا هر کامپوننت دیگر ایمپورت و استفاده می‌کنید:

<script>
import Message from './components/Message.vue'

export default {
  components: { Message }
}
</script>

<template>
  <Message message="این یک پیام است!" />
</template>

گام پنجم: افزودن Vue Router (مسیردهی)

برای اپلیکیشن‌هایی که بیش از یک صفحه دارند، نیاز به مسیردهی یا navigation داریم. Vue Router این امکان را فراهم می‌کند تا کاربران بین صفحات مختلف (مثل خانه، درباره ما، تماس و ...) جابه‌جا شوند بدون اینکه کل صفحه رفرش شود.

نصب Vue Router:

npm install vue-router

تعریف فایل مسیرها:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

اضافه کردن به main.js:

import router from './router'

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

استفاده از <router-view>:

<template>
  <router-view />
</template>

با استفاده از این تگ، بسته به مسیر فعلی، کامپوننت مناسب رندر می‌شود.

گام ششم: مدیریت وضعیت با Pinia (یا Vuex)

در پروژه‌های بزرگ که کامپوننت‌های مختلف نیاز به اشتراک داده‌ها دارند، مدیریت وضعیت اهمیت پیدا می‌کند. ابزارهایی مانند Vuex و Pinia به شما اجازه می‌دهند اطلاعات مشترک را در یک مرکز نگه دارید و در سراسر اپلیکیشن از آن‌ها استفاده کنید.

نصب Pinia:

npm install pinia

راه‌اندازی در main.js:

import { createPinia } from 'pinia'

const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

ساخت استور ساده:

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

استفاده در کامپوننت:

<script setup>
import { useCounterStore } from '../stores/counter'

const counter = useCounterStore()
</script>

<template>
  <button @click="counter.increment">افزایش: {{ counter.count }}</button>
</template>

گام هفتم: اجرای پروژه در محیط توسعه

در حین توسعه، نیاز دارید تغییرات را بلافاصله روی مرورگر ببینید. با اجرای پروژه در حالت توسعه، یک سرور محلی ایجاد می‌شود که با هر بار ذخیره‌سازی کد، خروجی به‌صورت زنده رفرش می‌شود. این فرآیند سرعت و دقت توسعه را افزایش می‌دهد.

npm run dev

این دستور پروژه را در یک سرور محلی اجرا می‌کند و تغییرات شما را به‌صورت خودکار رفرش می‌کند.

گام هشتم: ساخت بیلد نهایی (برای انتشار)

پس از اتمام مراحل توسعه، باید پروژه را به نسخه‌ای فشرده و بهینه تبدیل کنید که قابل بارگذاری روی سرور باشد. مرحله بیلد، تمام فایل‌ها را به شکل استاندارد برای اجرا در محیط واقعی آماده می‌کند و در پوشه‌ای به‌نام dist ذخیره می‌کند.

npm run build

خروجی در پوشه dist/ ذخیره می‌شود که شامل نسخه فشرده‌شده اپلیکیشن است.

در پایان

در این مقاله، به‌صورت گام‌به‌گام با فرآیند راه‌اندازی یک پروژه Vue.js از ابتدا تا مرحله انتشار آشنا شدیم. از نصب پیش‌نیازهایی مانند Node.js و استفاده از ابزار مدرن create-vue گرفته تا شناخت ساختار پروژه، تعریف کامپوننت‌ها، راه‌اندازی سیستم مسیردهی با Vue Router، مدیریت وضعیت با Pinia یا Vuex، و در نهایت بیلد کردن پروژه برای محیط واقعی.

هدف این راهنما آن بود که با ترکیب توضیحات مفهومی و نمونه‌کدهای عملی، درک شما از فرآیند توسعه در Vue.js عمیق‌تر شود. هر گام نه‌تنها جنبه فنی داشت، بلکه با توضیح روشن و کاربردی همراه شد تا از سردرگمی‌های رایج جلوگیری شود.

Vue.js با ترکیب سادگی، سرعت و قابلیت گسترش، یکی از قدرتمندترین ابزارهای توسعه رابط کاربری در دنیای امروز است. اما این قدرت زمانی شکوفا می‌شود که بدانید از کجا شروع کنید، چه ابزارهایی استفاده کنید، و چطور ساختاری منظم برای پروژه‌تان بنا کنید.