نصب و راه‌اندازی پروژه Vue با Vite و ساخت اولین اپلیکیشن

در مقاله قبلی با ماهیت Vue.js آشنا شدیم و اولین برنامه را با CDN اجرا کردیم. اما برای توسعه پروژه‌های واقعی به یک محیط استاندارد نیاز داریم که از بیلد بهینه، ماژول‌ها و کامپوننت‌های تک‌فایلی پشتیبانی کند. در این مقاله مرحله‌به‌مرحله یک پروژه حرفه‌ای ویو را با ابزار رسمی Vite نصب و راه‌اندازی می‌کنیم.

چرا Vite بهترین ابزار برای پروژه‌های Vue است

Vite یک ابزار ساخت (Build Tool) مدرن است که توسط ایوان یو، سازنده Vue، طراحی شده و امروزه به روش پیش‌فرض و توصیه‌شده برای ساخت پروژه‌های ویو تبدیل شده است. نام Vite از کلمه فرانسوی به معنای «سریع» می‌آید و دقیقاً همان چیزی است که تجربه خواهید کرد.

برخلاف ابزارهای قدیمی‌تر مثل Vue CLI که مبتنی بر Webpack بودند، Vite در حالت توسعه از قابلیت ماژول‌های بومی مرورگر (Native ESM) استفاده می‌کند. نتیجه این معماری، اجرای چشمگیر سرور توسعه در کسری از ثانیه است، حتی در پروژه‌هایی با صدها کامپوننت.

قابلیت Hot Module Replacement در Vite نیز باعث می‌شود تغییرات کد بدون رفرش کامل صفحه و بدون از دست رفتن State برنامه اعمال شود؛ همین ویژگی ظاهراً کوچک، سرعت توسعه را چند برابر می‌کند.

پیش‌نیاز اول: نصب Node.js

برای اجرای Vite به Node.js نیاز دارید؛ محیط اجرای جاوااسکریپت سمت سیستم که ابزارهای فرانت‌اند مدرن روی آن سوار می‌شوند. نسخه ۱۸ یا بالاتر Node برای نسخه‌های فعلی Vite توصیه می‌شود و نصب نسخه LTS بهترین انتخاب است.

به وب‌سایت رسمی Node.js بروید، نسخه LTS سیستم‌عامل خود را دانلود و با چند کلیک نصب کنید. پس از نصب، ترمینال را باز کنید و با دستور زیر از نصب موفق مطمئن شوید:

node --version
npm --version

اگر شماره نسخه‌ها نمایش داده شد یعنی همه‌چیز آماده است. npm، مدیر بسته Node، به‌صورت خودکار همراه آن نصب می‌شود و از این به بعد کار اصلی ما با دستورات npm خواهد بود.

ساخت پروژه جدید با دستور create vite

روش رسمی ساخت پروژه ویو، استفاده از اسکریپت آماده create-vite است. کافی است در ترمینال وارد پوشه موردنظر شوید و دستور زیر را اجرا کنید:

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

اجازه دهید هر دستور را جداگانه بررسی کنیم تا دقیقاً بدانید چه اتفاقی می‌افتد:

• خط اول اسکریپت create-vite را اجرا می‌کند، پوشه‌ای به نام my-vue-app می‌سازد و قالب آماده Vue را داخل آن کپی می‌کند.
• خط دوم وارد پوشه پروژه می‌شود تا دستورات بعدی در مسیر درست اجرا شوند.
• خط سوم تمام وابستگی‌های اعلام‌شده در فایل package.json را از رجیستری npm دانلود و داخل پوشه node_modules نصب می‌کند.
• خط آخر سرور توسعه را اجرا می‌کند و معمولاً آدرسی شبیه http://localhost:5173 را به شما نشان می‌دهد.

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

آشنایی با ساختار پوشه‌های پروژه

درک ساختار فایل‌های پروژه از همان روز اول اهمیت زیادی دارد، چون در ادامه مسیر مدام با آن‌ها سر و کار خواهید داشت. ساختار استاندارد یک پروژه تازه Vite به شکل زیر است:

مهم‌ترین پوشه برای شما src است؛ تمام کامپوننت‌ها، استایل‌ها و منطق برنامه در همین پوشه قرار می‌گیرد. پوشه public برای فایل‌هایی مثل favicon است که بدون پردازش کپی می‌شوند و node_modules را هم هرگز دستی تغییر ندهید.

فایل package.json شناسنامه پروژه است و لیست وابستگی‌ها و دستورات قابل اجرا (scripts) را نگه می‌دارد. فایل index.html هم در ریشه پروژه قرار دارد و همین موضوع یکی از تفاوت‌های Vite با ابزارهای قدیمی است؛ این فایل واقعاً نقطه ورود برنامه است نه فقط یک قالب.

بررسی فایل main.js؛ نقطه شروع اجرا

فایل src/main.js اولین فایل جاوااسکریپتی است که اجرا می‌شود و وظیفه آن ساخت نمونه اپلیکیشن و اتصال آن به صفحه است. محتوای پیش‌فرض آن به این شکل است:

import { createApp } from "vue"
import "./style.css"
import App from "./App.vue"

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

بیایید خط به خط این فایل کوتاه اما حیاتی را تحلیل کنیم:

• خط اول تابع createApp را از پکیج vue وارد می‌کند؛ همان تابعی که در مقاله قبل با CDN استفاده کردیم.
• خط دوم استایل‌های سراسری برنامه را بارگذاری می‌کند تا در تمام صفحات در دسترس باشند.
• خط سوم کامپوننت ریشه یعنی App.vue را وارد می‌کند؛ تمام کامپوننت‌های دیگر به‌صورت درختی زیر همین کامپوننت قرار می‌گیرند.
• خط آخر نمونه اپلیکیشن را با کامپوننت ریشه می‌سازد و به عنصری با شناسه app در فایل index.html متصل می‌کند.

کامپوننت تک‌فایلی (SFC) و ساختار App.vue

یکی از جذاب‌ترین ویژگی‌های ویو، فرمت کامپوننت تک‌فایلی یا Single File Component است. فایل‌هایی با پسوند .vue که هر کدام شامل سه بلوک مجزا برای تمپلیت، منطق و استایل هستند:

<script setup>
import { ref } from "vue"

const message = ref("به پروژه من خوش آمدید")
const count = ref(0)
</script>

<template>
  <main>
    <h1>{{ message }}</h1>
    <button @click="count++">شماره: {{ count }}</button>
  </main>
</template>

<style scoped>
main {
  text-align: center;
}
</style>

بلوک script setup جایی است که منطق کامپوننت با Composition API نوشته می‌شود. بلوک template ساختار HTML خروجی را تعریف می‌کند و بلوک style scoped استایل‌هایی می‌سازد که فقط روی همین کامپوننت اعمال می‌شوند و به بقیه صفحه نشت نمی‌کنند.

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

اگر هنگام اجرای npm run dev با خطای اشغال بودن پورت مواجه شدید، نگران نباشید؛ Vite به‌صورت خودکار پورت بعدی را امتحان می‌کند و آدرس جدید را در ترمینال نمایش می‌دهد. فقط کافی است آدرس جدید را در مرورگر باز کنید.

افزونه‌های ضروری VS Code برای توسعه Vue

تجربه توسعه با ویو زمانی کامل می‌شود که ادیتور شما هم قابلیت‌های این فریم‌ورک را بشناسد. اگر از VS Code استفاده می‌کنید، نصب چند افزونه کار را بسیار راحت‌تر می‌کند:

• افزونه رسمی Vue (نسخه Official) برای رنگ‌بندی سینتکس، تکمیل خودکار و بررسی خطاها در فایل‌های .vue
• ESLint برای پایبندی به قواعد کدنویسی و جلوگیری از باگ‌های رایج
• Prettier برای فرمت خودکار کد و یکدست ماندن استایل تیم

علاوه بر این‌ها، افزونه مرورگر Vue DevTools را هم حتماً نصب کنید. این ابزار به شما اجازه می‌دهد درخت کامپوننت‌ها، مقادیر State و رویدادهای برنامه را به‌صورت زنده ببینید و دیباگ کنید.

ساخت نسخه نهایی برای انتشار (Production Build)

وقتی توسعه تمام شد، باید نسخه بهینه و فشرده پروژه را برای قرار گرفتن روی سرور بسازید. این کار با یک دستور ساده انجام می‌شود:

npm run build
npm run preview

دستور npm run build با استفاده از Rollup تمام فایل‌ها را بهینه، فشرده و تجمیع می‌کند و خروجی نهایی را در پوشه dist قرار می‌دهد. دستور دوم هم یک سرور محلی برای پیش‌نمایش همین خروجی اجرا می‌کند تا قبل از انتشار، نسخه نهایی را تست کنید.

خروجی پوشه dist کاملاً مستقل است و روی هر هاستی که فایل‌های ثابت را سرو کند قابل اجراست؛ از هاست‌های اشتراکی ساده گرفته تا سرویس‌هایی مثل Netlify و Vercel.

اشتباهات رایج مبتدیان در مرحله نصب

بسیاری از مشکلات روزهای اول، ریشه در چند اشتباه تکراری دارند که دانستن آن‌ها ساعت‌ها وقت شما را نجات می‌دهد. اولین اشتباه، اجرای دستورات npm در مسیر اشتباه است؛ همیشه مطمئن شوید داخل پوشه پروژه هستید.

دومین اشتباه، نادیده گرفتن نسخه Node.js است. اگر خطاهای عجیب در مرحله نصب دیدید، اول نسخه Node را بررسی و در صورت نیاز ارتقا دهید. سومین مورد، پاک کردن دستی پوشه node_modules بدون حذف فایل package-lock است که گاهی باعث ناسازگاری نسخه‌ها می‌شود.

در صورت بروز مشکلات نصب عجیب، حذف هم‌زمان node_modules و package-lock.json و اجرای مجدد npm install در اکثر مواقع مشکل را حل می‌کند.

جمع‌بندی و آماده‌سازی برای قدم بعدی

در این مقاله یاد گرفتیم چرا Vite ابزار استاندارد پروژه‌های ویو است، Node.js را نصب کردیم، با چهار دستور ساده یک پروژه کامل ساختیم و ساختار فایل‌های آن را از main.js تا App.vue بررسی کردیم. همچنین با فرمت کامپوننت تک‌فایلی آشنا شدیم که از این پس قلب تمام کدهای ماست.

حالا که محیط توسعه آماده است، در مقاله بعدی به سراغ سینتکس تمپلیت ویو می‌رویم؛ جایی که یاد می‌گیرید چگونه داده‌ها را به صفحه متصل کنید و به رویدادهای کاربر پاسخ دهید.

پیش از آن، پیشنهاد می‌کنیم چند بار فرآیند ساخت پروژه را از ابتدا تمرین کنید و در فایل App.vue تغییراتی بدهید تا با رفتار Hot Reload آشنا شوید؛ همین تمرین ساده پایه اعتمادبه‌نفس شما در ادامه مسیر خواهد بود.