نصب و تنظیم محیط توسعه در Vue

برای شروع کار با Vue.js، چند روش برای نصب و راه‌اندازی محیط توسعه وجود داره. اینجا روش‌های پیشنهادی رو بررسی می‌کنیم:

۱. استفاده از CDN (برای تست سریع)

اگه فقط می‌خوای Vue رو تست کنی یا یه پروژه ساده بسازی، می‌تونی Vue رو مستقیماً از طریق CDN داخل یک فایل HTML لود کنی:

<!DOCTYPE html>

<html lang="fa">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Vue App</title>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

</head>

<body>

    <div id="app">

        <h1>{{ message }}</h1>

    </div>

    <script>

        const { createApp } = Vue;

        createApp({

            data() {

                return { message: "سلام Vue!" }

            }

        }).mount("#app");

    </script>

</body>

</html>

مزیت: سریع و بدون نیاز به نصب
محدودیت: برای پروژه‌های بزرگ پیشنهاد نمی‌شه

۲. نصب Vue CLI (روش پیشنهادی)

Vue CLI ابزاریه که بهت کمک می‌کنه یه پروژه استاندارد و مدرن Vue بسازی.

۱. نصب Node.js

Vue نیاز به Node.js داره، پس اگه نصب نداری، از سایت رسمی Node.js نسخه LTS رو بگیر و نصب کن. بعد از نصب، توی ترمینال چک کن که نصب شده:

node -v

npm -v

۲. نصب Vue CLI

حالا Vue CLI رو به‌صورت سراسری نصب کن:

npm install -g @vue/cli

بعد از نصب، بررسی کن که درست نصب شده:

vue --version

۳. ایجاد یک پروژه جدید

برای ساخت یه پروژه جدید Vue، دستور زیر رو اجرا کن و نام پروژه رو جای my-vue-app بزار:

vue create my-vue-app

ازت می‌پرسه که کدوم قالب رو می‌خوای، می‌تونی Default (Vue 3 + Vite) رو انتخاب کنی یا گزینه Manually select features رو بزنی و چیزای دلخواهت رو انتخاب کنی.

۴. اجرای پروژه

بعد از ایجاد پروژه، وارد پوشه‌ی پروژه شو و سرورش رو اجرا کن:

cd my-vue-app

npm run dev

حالا Vue روی http://localhost:5173 اجرا شده و می‌تونی نتیجه رو ببینی!

۳. استفاده از Vite (روش سریع‌تر)

Vite یه ابزار جایگزین Vue CLI هست که پروژه Vue رو خیلی سریع‌تر اجرا می‌کنه. برای نصب و اجرای Vue با Vite:

npm create vite@latest my-vue-app --template vue

cd my-vue-app

npm install

npm run dev

Vite نسبت به Vue CLI سبک‌تر و سریع‌تره و برای پروژه‌های جدید پیشنهاد می‌شه.

جمع‌بندی

CDN برای تست سریع و پروژه‌های ساده
Vue CLI برای ساخت پروژه استاندارد و حرفه‌ای
Vite برای اجرای سریع‌تر و بهینه‌تر پروژه‌ها

پیشنهاد من: اگه یه پروژه جدی می‌خوای، Vue CLI یا Vite رو استفاده کن! 🚀