
ما در قسمت قبل با instant prototyping آشنا شدیم و به شما توضیح دادم که mode های مختلفی برای خروجی گرفتن داریم که یکی از آن ها حالت production بود و با دستور npm run build به دست می آمد. سوال اصلی اینجاست که این دستور چه چیزی را برای production می سازد؟ ما سه راه مختلف برای ساختن build نهایی داریم، توجه کنید که منظور من mode نیست. بحث ما بحث جدیدی به نام build targets است.
زمانی که ما پروژه Vue خودمان را شروع می کنیم (یا حتی یک کامپوننت Vue) می توانیم آن را به سه شکل متفاوت داشته باشیم یا به زبان دیگر به سه شکل مختلف از آن خروجی بگیریم:
- یک برنامه Vue یا همان Vue App
- یک کتابخانه Vue یا همان Vue Library که در برنامه های دیگر Vue شما استفاده می شود.
- یک web component برای تمام پروژه های شما!
اگر با web component ها آشنایی ندارید باید بگویم که یک web component در واقع چیزی شبیه به یک تگ شخصی سازی شده در زبان HTML است. اگر یادتان باشد ما از کامپوننت ها در Vue به همین شکل استفاده می کردیم (مثلا <my-component>
). حالا شکل سوم خروجی ما که web component است یک حالت خاص از web component های عادی است که نیازی به شیء Vue ندارد. یعنی ما می توانیم یک کامپوننت را با Vue بنویسیم اما در پروژه های دیگری که اصلا با Vue نوشته نشده اند از آن استفاده کنیم! برای استفاده از آن می توانیم از کامپوننت خود به صورت یک عنصر HTML ساده استفاده کنیم، گرچه که باید import جاوا اسکریپتی را برایش داشته باشیم چرا که در نهایت این کامپوننت با جاوا اسکریپت کار خواهد کرد (اما نیازی به Vue ندارد). بیایید به تفاوت های این سه مورد نگاهی داشته باشیم.
در حالت اول (Vue App) باید دستور vue build –target app را اجرا کنیم اما از آنجایی که هدف پیش فرض همیشه app می باشد، فقط vue build را اجرا می کردیم. نتیجه اجرای این کد یک برنامه ساده Vue می باشد که به شما کد های خودتان و فریم ورک Vue را می دهد. در چنین حالتی همه چیز آماده است و نیازی به استفاده از import ها نخواهیم داشت.
در حالت دوم (Vue Library) باید دستور vue build –target lib را اجرا کنیم تا یک پروژه نهایی را تحویل بگیریم. تفاوت این حالت با حالت اول در این است که فریم ورک Vue در پروژه نهایی قرار نمی گیرد. چرا؟ vue library ها معمولا مجموعه ای از کامپوننت ها هستند که توسط یک فرد یا یک گروه ساخته می شوند تا بعدا در پروژه های بزرگ تر استفاده شوند. مثلا شما می توانید چندین کامپوننت آماده بسازید تا در پروژه های آینده خود مجبور نباشید برای پیاده سازی فرم ثبت نام همه چیز را از صفر کدنویسی کنید. بنابراین vue library ها فقط در پروژه های Vue قابل استفاده هستند.
در حالت سوم (web component) از دستور vue build –target wc استفاده می کنیم تا پروژه نهایی را به صورت یک web component دریافت کنیم که distributable web component نام دارند. کلمه distributable به معنی «توزیع پذیر» است بنابراین می توان فهمید که این دسته از برنامه ها نیازی به شیء Vue ندارند. خروجی که در این حالت دریافت می کنیم در نهایت یک فایل جاوا اسکریپتی ساده است اما باید Vue را نیز به همراه آن import کنید. به همین دلیل است که تاکید را روی شیء Vue و نه فریم ورک Vue می گذارم. فایده نیاز نداشتن به شیء Vue چیست؟ اگر به شیء Vue نیازی نداشته باشیم، می توانیم از کامپوننت خود در پروژه هایی که با Vue نوشته نشده اند استفاده کنیم (البته که باید vue را import کنیم اما نیازی نیست شیء Vue داشته باشیم) اما اگر به شیء Vue نیاز داشته باشیم، باید حتما در یک پروژه Vue از آن استفاده کنیم.
برای کار عملی با این موارد یک فایل ساده به نام Hello.vue ایجاد کنید که محتوای زیر را داشته باشد:
<template> <h1>Hello</h1> </template>
حالا می توانیم دستور زیر را اجرا کنیم:
vue build Hello.vue --target app
با این کار همین یک فایل را به عنوان پروژه خود در نظر گرفته و خروجی اش را در پوشه جدیدی به نام dist و سپس پوشه js دریافت می کنیم که شامل خود فریم ورک vue نیز می شود. برای اجرای این کامپوننت نیاز به سرور داریم بنابراین می توان گفت:
npm install -g http-server
این پکیج یک سرور ساده node است. حالا می گوییم:
cd dist/
با این کار وارد پوشه خروجی شده ایم. سپس می گوییم:
http-server
با اجرای این کد، سرور ما به طور خودکار فایل را در مرورگر بارگذاری می کند. البته این مثال فقط برای یادگیری بود و گرنه در حالت عادی از یک پروژه عادی برای گرفتن خروجی از Vue app ها استفاده می کنیم (با دستور npm run build). این می شود حالت اول.
حالا با کلیدهای Ctrl + C سرور را قطع می کنیم و ترمینال را می بندیم. سپس در ترمینال جدیدی از پروژه خود می گوییم:
vue build Hello.vue --target lib
با این کار در پوشه dist چندین فایل جاوا اسکریپتی می گیریم که می توانیم آن را در npm برای دانلود دیگران قرار بدهیم. این حالت دوم بود که یک vue library است. در حالت سوم و برای web component نیز میگوییم:
vue build Hello.vue --target wc --name my-greetings
استفاده از name– الزامی است تا نام تگ نهایی را مشخص کنید. اگر یادتان باشد گفتم که web component ها مانند تگ های شخصی سازی شده هستند که در HTML استفاده می کنیم بنابراین باید یک نام را نیز برای تگ خود انتخاب کنید و این نام باید حتما علامت خط فاصله را داشته باشد. من نام my-greetings را انتخاب کرده ام. در پوشه dist فایل های جاوا اسکریپتی و demo.html خود را دریافت می کنیم که درون آن از my-greetings به شکل زیر استفاده شده است:
<my-greetings></my-greetings>
برای یادگیری اطلاعات بیشتر راجع به این مفاهیم به documentation رسمی Vue مراجعه کنید.
- نصب و راهاندازی فریمورک VueJS
- مثالی قویتر و نصب محلی Vue
- درکی ساده از Tamplateها در Vue
- درک بهتر Directiveها + برخی از Directiveهای مشهور
- تعامل با Event Listenerها
- قدرت Vue با انواع Modifierها
- مبحث two-way-binding و پاسخ به تغییرات
- خصوصیات محاسبهشده (Computed Properties)
- روش جایگزین خصوصیات Computed
- استایلدهی پویا با اشیاء
- استایلدهی پویا اسمی بدون استفاده از کلاسها
- ایجاد شرط با v-if
- نمایش لیستها با v-for
- گردش درون اشیاء
- رهگیری عناصر در v-for
- اولین پروژه تمرینی – آمادهسازی اولیه
- پیادهسازی منطق شروع بازی
- تکمیل دکمه Attack
- کدنویسی متدهای باقیمانده در بازی
- نمایش log و اتمام پروژه
- آشنایی و تعامل بیشتر با شیء Vue
- نحوه مدیریت دادهها در شیء Vue
- استفاده از ref$ در قالبهای HTML
- آشنایی با Mount کردن Templateها
- نحوه بهروزرسانی DOM و چرخه زندگی شیء Vue
- استفاده از Lifecycleها در عمل
- راهاندازی سرور محلی Vue
- آشنایی با Vue CLI
- درک بهتر فایلهای Vue
- آشنایی با کامپوننتها
- ساخت کامپوننتها
- استفاده از کامپوننتها و قوانین آن
- ارتباط بین کامپوننتها با Props
- اعتبارسنجی Props
- رویدادهای شخصیسازیشده
- ارتباط بین کامپوننتهای خواهر و برادر
- استفاده از یک شیء سراسری Vue
- آشنایی با Slotها
- بررسی جزئیات بیشتری از Slotها
- قابلیتی جدید به نام Dynamic Components
- مرگ کامپوننتهای پویا
- فصل جدید و پروژه جدید
- پروژه Quote – پاسدادن دادهها با Prop
- پروژه Quote – تکمیل ثبت Quote
- تکمیل پروژه Quoteها
- فصل جدید، کار با فرمها
- کار با عناصر Textarea
- عناصر Checkbox و Radiobutton
- کار با منوهای آبشاری و جزئیات v-model
- تعریف عناصر شخصیسازیشده
- نگاهی عمیقتر به Directiveها
- ساخت یک Directive شخصی
- ثبت محلی Directiveها + قدمی پیشرفتهتر
- آشنایی با Filterها
- جایگزینی برای Filterها
- آشنایی با Mixinها
- جزئیات تکمیلی در مورد Mixinها
- آشنایی با انیمیشنها در Vue
- استفاده عملی از Transition و Animation
- ترکیب Transition و Animation
- استفاده از کلاسهای CSS مختلف
- تبدیل عناصر مختلف به یکدیگر با انیمیشن
- اعمال انیمیشن با جاوا اسکریپت
- کدنویسی متدهای مربوط به hookهای جاوا اسکریپتی
- تکمیل انیمیشن جاوا اسکریپتی + کامپوننتهای پویا
- ساخت یک لیست برای انیمیشنهای گروهی
- اضافهکردن انیمیشن به لیست ساختهشده
- مینی پروژه فصل – سوالات ریاضی
- تکمیل پروژه و اضافهکردن انیمیشن
- فصل جدید، درخواستهای HTTP
- ارسال اطلاعات به Firebase
- دریافت دادهها از Firebase
- آشنایی با Interceptorها در Vue-Resource
- آشنایی با مفهوم Resource در Vue-Resource
- جزئیات تکمیلی Resourceها
- فصل جدید، آشنایی با Routing
- آشنایی با Routing Modes و اضافهکردن لینکها
- استایلدهی لینک فعال
- ایجاد Navigation با کد و پارامترهای URL
- واکنش به تغییرات URL و پارامترهای آن
- ساخت URLهای پویاتر با Named Routes
- مباحث Query Parameter و Redirection
- مبحث Redirect و اضافهکردن انیمیشن
- پاسدادن # و کنترل عملیات اسکرول
- محافظت از Routeها با استفاده از Gaurdها (قسمت اول)
- محافظت از Routeها با استفاده از Gaurdها (قسمت دوم)
- بارگذاری Routeها به صورت lazy
- فصل جدید، آشنایی با VueX
- نحوهی پیادهسازی اولیهی پکیج VueX
- آشنایی با Getterها در VueX
- اتصال خودکار Getterها به خصوصیات
- حل مشکل ترکیب Getterها و Computed Props
- آشنایی با مبحث Mutation در VueX
- آشنایی با Actionها در Mutations
- درک عملیاتهای پشت صحنه در mapActions
- خلاصهی جلسات قبل + معرفی مشکلی جدید
- اعمال two-way-binding در VueX
- ماژولار کردن مدیریت State در VueX
- استفاده از Namespaceها در VueX
- فصل جدید، پروژهی نهایی دوره
- پیادهسازی Header یا Navigation سایت
- ایجاد ساختار برای قسمت سهام (stocks)
- اضافهکردن منطق دکمهی Buy
- پیادهسازی VueX روی پروژه
- تعریف Mutationهای ماژول Portfolio در VueX
- پیادهسازی Getters برای ماژول Portfolio در VueX
- تکمیل کامپوننت Portfolio و نمایش سهام
- اعتبارسنجی برای فروش سهام و استفاده از فیلترها
- نمایش Funds و اعتبارسنجی برای خرید سهام
- پایان دادن به روز + اضافه کردن انیمیشن به صفحات
- پیادهسازی drop-down و راهاندازی Firebase
- ذخیره و دریافت قیمتها با درخواستهای PUT و GET
- تکمیل دکمهی Load Data و کار با Vue dev Tools
- خروجیگرفتن نهایی از برنامه برای قرارگیری روی سرور
- فصل پیوست ۱: استفاده از axios به جای vue-resource
- فصل پیوست ۱: درخواست GET در axios
- فصل پیوست ۱: استفاده از Interceptorها در Axios
- فصل پیوست ۲: احراز هویت در برنامههای SPA
- فصل پیوست ۲: ساخت کاربر جدید با ایمیل و رمز عبور
- فصل پیوست ۲: دریافت توکن احراز هویت در مرورگر
- فصل پیوست ۲: تکمیل منطق برنامه و کدهای باقیمانده
- فصل پیوست ۲: پیوست توکن به درخواستهای خروجی
- فصل پیوست ۲: بهینهسازی برنامه و Path Guard
- فصل پیوست ۲: اضافهکردن مکانیسم logout از حساب
- فصل پیوست ۲: پیادهسازی logout خودکار از حساب
- فصل پیوست ۲: ذخیرهی دادهها در localStorage
- فصل پیوست ۲: پیادهسازی فرآیند login خودکار
- فصل پیوست ۳: فصل جدید، اعتبارسنجی دادههای کاربر
- فصل پیوست ۳: ارائهی فیدبک اعتبارسنجی در UI
- فصل پیوست ۳: آشنایی با Validatorهای عددی
- فصل پیوست ۳: آشنایی با Validatorهای رمز عبور
- فصل پیوست ۳: آشنایی با requiredUnless
- فصل پیوست ۳: اعتبارسنجی آرایههای پویا
- فصل پیوست ۳: ثبت فرم و اعتبارسنجیهای ناهمگام
- فصل پیوست ۴: نسخهی 3 از Vue CLI
- فصل پیوست ۴: آشنایی با پروژه در CLI جدید
- فصل پیوست ۴: استفاده و کار با پلاگینها در CLI جدید
- فصل پیوست ۴: آشنایی با Environment Variables
- فصل پیوست ۴: خروجی گرفتن از برنامه نهایی
- فصل پیوست ۴: شخصیسازی بیشتر Build
- فصل پیوست ۴: استفاده از GUI