چرا، چگونه و راه اندازی (Why, How and Setup)
برای مقیاس پذیری Vue، از فایل های تکی (*.vue) استفاده می کنیم. «راه اندازی Vue» یعنی ابزارها را بچینیم تا پروژه های بزرگ راحت تر ساخته شوند. این مسیر شفاف است و قدم به قدم پیش می رویم.
چرا مقیاس پذیری Vue مهم است؟
با SFC همه چیز منظم تر می شود. پروژه های بزرگ بهتر مدیریت می شوند. همچنین، صفحه با ذخیره تغییرات فوراً به روز می شود. این همان روشی است که توسعه دهندگان حرفه ای استفاده می کنند.
چگونه کار می کند؟
«کامپوننت تکی (Single File Component)» فایلی با سه بخش است. خروجی مستقیم مرورگر نیست؛ بنابراین باید بیلد شود. ابزار بیلد «Vite» این تبدیل را انجام می دهد.
راه اندازی ابزارها
- VS Code را نصب کن و باز کن.
- افزونه «Volar» را در VS Code نصب کن.
- آخرین نسخه Node.js را نصب کن.
نکته: «Node.js» محیط اجرای جاوااسکریپت روی سرور است. Vite روی آن اجرا می شود.
ساخت پروژه پیش فرض
- یک پوشه برای پروژه های Vue بساز.
- ترمینال VS Code را باز کن.
- به پوشه ساخته شده برو و دستور زیر را بزن.
npm init vue@latest
- نام پروژه را وارد کن. مثال:
firstsfc. - به گزینه ها پاسخ «No» بده تا ساده بمانی.
- دستورهای زیر را به ترتیب اجرا کن.
cd firstsfc
npm install
npm run dev
نکته: اگر مرورگر باز نشد، لینک نمایش داده شده در ترمینال را باز کن.
فایل های پروژه
main.js
این فایل به Vite می گوید پروژه چگونه بیلد شود. پیش تر با CDN، کد را به div#app متصل می کردیم. حالا این نقش را main.js برعهده دارد.
App.vue
این فایل سه بخش دارد: <template> برای HTML، <script> برای منطق، و <style> برای CSS. تگ های مانند <HelloWorld> کامپوننت ها هستند.
گام های تمرینی سریع
- پوشه پروژه را بساز و واردش شو.
npm init vue@latestرا اجرا کن.npm installو سپسnpm run devرا اجرا کن.
جمع بندی سریع
- راه اندازی Vue با SFC منظم تر است.
- Vite پروژه را برای مرورگر بیلد می کند.
- VS Code، Volar و Node ضروری هستند.
- شروع سریع با
npm init vue@latest.
ادامه مسیر: برای آشنایی با قالب ها، به قالب ها (Templates) برو. سپس، ساخت اولین SFC را در اولین کامپوننت تکی دنبال کن. این دو صفحه، «راه اندازی Vue» را کامل می کنند.