فهرست سرفصل‌های 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)
نتیجه‌ای برای جستجو یافت نشد.

بیلد (Build)

وقتی کار تمام شد، پروژه از «توسعه (Development)» به «بیلد (Build)» می رود. بیلد یعنی کدها کامپایل شوند و برای مرورگر آماده شوند. خروجی شامل فایل های HTML، CSS و JS است. دیگر سرور توسعه لازم نیست.

چرا بیلد مهم است؟

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

گام های عملی بیلد

  1. سرور توسعه را متوقف کن. کلیدهای Q یا Ctrl+C را بزن.
  2. دستور بیلد را اجرا کن. خروجی در پوشه dist می آید.
  3. برای تست خروجی، از پیش نمایش استفاده کن.

اجرای بیلد با npm

npm run build

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

پس از اجرا، پوشه dist ساخته می شود. داخلش فایل های HTML، CSS و JS است. این فایل ها مستقیم روی سرور قابل میزبانی هستند.

نمایش نسخه بیلد شده

npm run preview

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

این دستور، پروژه بیلد شده داخل dist را باز می کند. سپس در مرورگر نتیجه نهایی را می بینی.

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

جمع بندی سریع

  • بیلد، خروجی سبک و بهینه می سازد.
  • خروجی در پوشه dist ذخیره می شود.
  • برای تست نهایی از preview استفاده کن.
  • پس از بیلد، نیازی به سرور توسعه نیست.

ادامه مسیر: انیمیشن با v-for، سپس کامپوزیشن API.