Skip to content

Getting Started

به آموزش Vue خوش آمدید!

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

پیش‌نیازها

این آموزش آشنایی اولیه با HTML و CSS و جاوااسکریپت را نیازمند است. اگر کاملاً در توسعه فرانت‌اند تازه کار هستید، ممکن است ایده خوبی نباشد که به‌ عنوان اولین گام به سراغ یک فریمورک بروید - اصول اولیه را درک کنید و سپس برگردید! داشتن تجربه قبلی با فریمورک‌های دیگر کمک می‌کند، اما لازم نیست.

چگونه از این آموزش استفاده کنیم؟

شما می‌توانید در سمت چپزیر کد را ویرایش کرده و نتیجه را بلافاصله مشاهده کنید. هر بخش یک ویژگی اصلی Vue را معرفی خواهد کرد، و از شما انتظار خواهد رفت که کد را کامل کنید تا پیش نمایش کار کند. اگر در مسیر به مشکلی برخوردید شما دکمه‌ای خواهید داشت به نام "نشان بده!" که کد کامل شده را به شما نمایش خواهد داد. سعی کنید روی این ویژگی خیلی حساب باز نکنید 😃 - شما با دست و پنجه نرم کردن با کد سریع تر یاد می‌گیرید.

اگر یک توسعه‌دهنده با تجربه هستید که از Vue 2 یا سایر فریمورک‌ها می‌آیید، چند تنظیمات وجود دارد که می‌توانید برای بهترین استفاده از این آموزش، آن‌ها را تغییر دهید. اگر مبتدی هستید، توصیه می‌شود با پیش‌فرض‌ها جلو بروید.

جزئیات تنظیمات آموزش
  • Vue دو نوع رابط برنامه‌نویسی ارائه می‌دهد: Options API و Composition API. این آموزش برای هر دو طراحی شده است - شما می‌توانید سبک ترجیحی خود را با استفاده از کلیدهای اولویت API در بالا انتخاب کنید. درباره سبک‌های API بیشتر بیاموزید.

  • همچنین می‌توانید بین حالت SFC یا حالت HTML جابجا شوید. حالت اول نمونه‌های کد را در قالب کامپوننت‌های تک فایلی (SFC) نمایش می‌دهد، که بیشتر توسعه‌دهندگان وقتی از Vue با build step استفاده می‌کنند، از آن بهره می‌برند. حالت HTML نمونه‌های استفاده از Vue بدون build step را نشان می‌دهد.

نکته

اگر قصد استفاده از حالت HTML بدون مرحله بیلد در برنامه‌های خودتان را دارید، مطمئن شوید که importها را به این شکل تغییر می‌دهید:

js
import { ... } from 'vue/dist/vue.esm-bundler.js'

درون اسکریپت‌هایتان یا ابزار بیلد خود را برای حل مسئله، vue را مطابق با آن تنظیم می‌کنید. تنظیمات نمونه برای Vite:

js
// vite.config.js
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}

برای اطلاعات بیشتر به بخش مربوطه در راهنمای ابزارها مراجعه کنید.

آماده اید؟ برای شروع روی "بعدی" کلیک کنید.

App.vue
Show Error
Auto Save
آموزش has loaded