فهرست سرفصل‌های Vue
خانه (HOME) معرفی (Intro) دایرکتیوها (Directives) v-bind (v-bind) v-if (v-if) v-show (v-show) v-for (v-for) رویدادها (Events) v-on (v-on) متدها (Methods) تغییردهنده های رویداد (Event Modifiers) فرم ها (Forms) v-model (v-model) بایندینگ CSS (CSS Binding) ویژگی های محاسبه شده (Computed Properties) واچرها (Watchers) قالب ها (Templates) چرا، چگونه و راه اندازی (Why, How and Setup) اولین صفحه SFC (First SFC Page) کامپوننت ها (Components) پراپس (Props) کامپوننت های v-for (v-for Components) $emit() ($emit()) ویژگی های عبوری (Fallthrough) (Fallthrough Attributes) استایل Scoped (Scoped Styling) کامپوننت های محلی (Local Components) اسلات ها (Slots) v-slot (v-slot) اسلات های Scoped (Scoped Slots) کامپوننت های پویا (Dynamic Components) Teleport (Teleport) درخواست HTTP (HTTP Request) رفرنس های تمپلیت (Template Refs) هوک های چرخه عمر (Lifecycle Hooks) Provide/Inject (Provide/Inject) مسیریابی (Routing) ورودی های فرم (Form Inputs) انیمیشن ها (Animations) انیمیشن با v-for (Animations with v-for) بیلد (Build) Composition API (Composition API) ویژگی های توکار (Built-in Attributes) ویژگی 'is' ('is' Attribute) ویژگی 'key' ('key' Attribute) ویژگی 'ref' ('ref' Attribute) کامپوننت های توکار (Built-in Components) <KeepAlive> (<KeepAlive>) <Teleport> (<Teleport>) <Transition> (<Transition>) <TransitionGroup> (<TransitionGroup>) المان های توکار (Built-in Elements) <component> (<component>) <slot> (<slot>) <template> (<template>) نمونه کامپوننت (Component Instance) $attrs ($attrs) $data ($data) $el ($el) $parent ($parent) $props ($props) $refs ($refs) $root ($root) $slots ($slots) $emit() ($emit()) $forceUpdate() ($forceUpdate()) $nextTick() ($nextTick()) $watch() ($watch()) دایرکتیوها (Directives) v-bind (v-bind) v-cloak (v-cloak) v-for (v-for) v-html (v-html) v-if (v-if) v-else-if (v-else-if) v-else (v-else) v-memo (v-memo) v-model (v-model) v-on (v-on) v-once (v-once) v-pre (v-pre) v-show (v-show) v-slot (v-slot) v-text (v-text) گزینه های نمونه (Instance Options) داده ها (data) متدها (methods) محاسبه شده ها (computed) watch (watch) پراپس (props) emits (emits) expose (expose) هوک های چرخه عمر (Lifecycle Hooks) beforeCreate (beforeCreate) created (created) beforeMount (beforeMount) mounted (mounted) beforeUpdate (beforeUpdate) updated (updated) beforeUnmount (beforeUnmount) unmounted (unmounted) errorCaptured (errorCaptured) renderTracked (renderTracked) renderTriggered (renderTriggered) activated (activated) deactivated (deactivated) serverPrefetch (serverPrefetch) مثال ها (Examples) تمرین ها (Exercises) کوییز (Quiz) سیلابس (Syllabus) برنامه مطالعه (Study Plan) سرور (Server) گواهینامه (Certificate)
نتیجه‌ای برای جستجو یافت نشد.
Vue

Vue — چرا، چگونه و راه اندازی (Why, How and Setup)

آخرین بروزرسانی: 1404/08/21

چرا، چگونه و راه اندازی (Why, How and Setup)

برای مقیاس پذیری Vue، از فایل های تکی (*.vue) استفاده می کنیم. «راه اندازی Vue» یعنی ابزارها را بچینیم تا پروژه های بزرگ راحت تر ساخته شوند. این مسیر شفاف است و قدم به قدم پیش می رویم.

چرا مقیاس پذیری Vue مهم است؟

با SFC همه چیز منظم تر می شود. پروژه های بزرگ بهتر مدیریت می شوند. همچنین، صفحه با ذخیره تغییرات فوراً به روز می شود. این همان روشی است که توسعه دهندگان حرفه ای استفاده می کنند.

چگونه کار می کند؟

«کامپوننت تکی (Single File Component)» فایلی با سه بخش است. خروجی مستقیم مرورگر نیست؛ بنابراین باید بیلد شود. ابزار بیلد «Vite» این تبدیل را انجام می دهد.

راه اندازی ابزارها

  1. VS Code را نصب کن و باز کن.
  2. افزونه «Volar» را در VS Code نصب کن.
  3. آخرین نسخه Node.js را نصب کن.

نکته: «Node.js» محیط اجرای جاوااسکریپت روی سرور است. Vite روی آن اجرا می شود.

ساخت پروژه پیش فرض

  1. یک پوشه برای پروژه های Vue بساز.
  2. ترمینال VS Code را باز کن.
  3. به پوشه ساخته شده برو و دستور زیر را بزن.
npm init vue@latest

مشاهده در ادیتور

  1. نام پروژه را وارد کن. مثال: firstsfc.
  2. به گزینه ها پاسخ «No» بده تا ساده بمانی.
  3. دستورهای زیر را به ترتیب اجرا کن.
cd firstsfc
npm install
npm run dev

مشاهده در ادیتور

نکته: اگر مرورگر باز نشد، لینک نمایش داده شده در ترمینال را باز کن.

فایل های پروژه

main.js

این فایل به Vite می گوید پروژه چگونه بیلد شود. پیش تر با CDN، کد را به div#app متصل می کردیم. حالا این نقش را main.js برعهده دارد.

App.vue

این فایل سه بخش دارد: <template> برای HTML، <script> برای منطق، و <style> برای CSS. تگ های مانند <HelloWorld> کامپوننت ها هستند.

گام های تمرینی سریع

  1. پوشه پروژه را بساز و واردش شو.
  2. npm init vue@latest را اجرا کن.
  3. npm install و سپس npm run dev را اجرا کن.

جمع بندی سریع

  • راه اندازی Vue با SFC منظم تر است.
  • Vite پروژه را برای مرورگر بیلد می کند.
  • VS Code، Volar و Node ضروری هستند.
  • شروع سریع با npm init vue@latest.

ادامه مسیر: برای آشنایی با قالب ها، به قالب ها (Templates) برو. سپس، ساخت اولین SFC را در اولین کامپوننت تکی دنبال کن. این دو صفحه، «راه اندازی Vue» را کامل می کنند.