
به فصل جدید خوش آمدید! ما در این فصل می خواهیم با CLI در Vue آشنا بشویم و روی مفاهیمی مانند راه اندازی سرور محلی برای خودمان کار کنیم. تا این قسمت کدها را در مرورگر باز می کردیم و هر بار مرورگر را refresh می کردیم یا اینکه اصلا در همان jsfiddle کار می کردید و باید برای هر بار اجرای کد کلید های Ctrl + Enter را می زدید. چنین محیط توسعه ای فقط برای برنامه های بسیار کوچک کار می کند (مثل کدهای بسیار ساده ای که تا این قسمت نوشته ایم) اما برای پروژه های بزرگ تر باعث دردسر است که هر بار صفحه را refresh کنیم.
سوالی که پیش می آید این است: یک محیط توسعه مناسب برای برنامه های بزرگتر، باید چه ویژگی هایی داشته باشد؟ اولین نکته این است که یک محیط توسعه مناسب، کدهای ما را بهینه سازی می کند. به طور مثال به ما اجازه می دهد که بتوانیم کدهای ES6 بنویسیم و سپس خودش آن کدها را به ES5 کامپایل (تبدیل) کند. همچنین به نظر من هر محیط توسعه حرفه ای، باید یک سرور توسعه یا سرور محلی داشته باشد. معمولا دانشجویانی که در حال یادگیری Vue هستند در این قسمت گیج می شوند. مگر Vue در مرورگر اجرا نمی شود؟ چرا به سرور نیاز داریم؟ بگذارید برایتان توضیح بدهم.
Vue در مرورگر شما اجرا می شود اما باید از سمت یک سرور دریافت شود! تمام منابع اینترنتی (چه تصاویر چه فریم ورک ها چه ویدیوی ها چه کدها و غیره) همگی از یک سرور دریافت می شوند و ما می خواهیم در شرایط واقعی کدنویسی کنیم تا برنامه خودمان را به صورت واقعی تست کرده باشیم. زمانی که روی فایل index.html کلیک می کنید تا در مرورگر شما باز شود، مرورگر آن را با استفاده از پروتکل File:// باز می کند در حالی که در دنیای وب واقعی، صفحات سایت ها از پروتکل های HTTP و HTTPS ارسال می شوند. پروتکل file و http با هم تفاوت های زیادی دارند بنابراین نمی توان تصور کرد که اگر برنامه ما بدون نقص روی پروتکل file اجرا شد قطعا در دنیای وب نیز بدون مشکل خواهد بود. بنابراین برنامه ما در یک محیط واقعی نوشته می شود و با مشکلات واقعی روبرو خواهد شد.
همچنین در برخی از پروژه ها نمی خواهیم تمام منابع و فایل ها را یکجا بارگذاری کنیم. مثلا در فصل های بعدی می خواهیم با مباحثی مانند lazy loading کار کنیم؛ یعنی برخی از منابع مانند تصاویر فقط زمانی بارگذاری شوند که به آن قسمت از صفحه برویم. چرا؟ اگر تمام تصاویر را در همان ابتدا بارگذاری نکنیم، می توانیم صفحه را سریع تر بالا بیاوریم (نیازی به دانلود تمام منابع صفحه نیست) و سپس اگر کسی به قسمت های پایین تر صفحه برود، با استفاده از جاوا اسکریپت آن را تشخیص داده و سریعا تصاویر را برایش بارگذاری می کنیم. این کار توسط بسیاری از وب سایت های معروف در دنیا انجام می شود و تجربه کاربری بسیار خوبی را به ارمغان می آورد. برای انجام چنین کار هایی حتما به سرور احتیاج داریم و نمی توان از یک فایل ساده HTML استفاده کرد.
همچنین یکی از کمک های مهمی که سرور ها به ما می کنند، قابلیت auto reloading است. یعنی هر بار که کدهای ما تغییر می کند، خودش به صورت خودکار صفحه را reload می کند و نیازی نیست که هر بار به صورت دستی صفحه را refresh کنیم. در نگاه اول شاید این قابلیت آنقدر ها هم مهم نباشد اما در پروژه های بزرگ واقعا کمک بزرگی است. شما دائما در حال نوشتن کد و تغییر آن هستید و refresh کردن صفحه (مثلا هر 15 ثانیه یک بار) واقعا عذاب آور است.
از ویژگی های دیگر سرور توسعه می توان به قابلیت استفاده از Single File Templates اشاره کرد. این قابلیت بهترین جایگزین برای استفاده از خصوصیت el یا template در شیء Vue است و در طول این دوره فقط از همین نوع قالب ها استفاده خواهیم کرد. با استفاده از این قالب ها می توانیم هر قسمت از کد HTML خود را درون یک فایل جداگانه بنویسیم و در نهایت سرور توسعه ما آن ها را در یک فایل کامپایل می کند. معمولا استفاده از el یا خصوصیت Template در شیء Vue مربوط به نوشتن ویجت ها یا قسمت های کوچکی از برنامه است. به علاوه قابلیت case-insensitive component selector را خواهیم داشت، که بعدا در مورد آن مفصلا صحبت خواهیم کرد و در نهایت با استفاده از سرور ها می توانیم از Babel (کامپایل کدهای ES6 به ES5 و غیره) یا SASS (اضافه کردن قابلیت های مختلف به کدهای CSS) یا preprocessor (پیش پردازنده) های دیگر استفاده کنیم.
مسئله دیگر اینجاست که معمولا دو نوع Vue داریم:
- Vue به همراه کامپایلر (چیزی که تا به حال از آن استفاده می کردیم)
- Vue بدون کامپایلر و از قبل کامپایل شده
ما تا این لحظه فریم ورک Vue را به صورت تگ اسکریپت درون فایل های HTML خود قرار می دادیم. بنابراین این فریم ورک به همراه کامپایلر آن در پروژه ما بارگذاری می شد. کامپایلر همان چیزی است که syntax خاص Vue را به جاوا اسکریپت ساده برای مرورگرها تبدیل می کند. بنابراین کامپایلر می فهمد که به جای {{ title }} باید به دنبال خصوصیت title بگردد و مقدار اصلی اش را به جای آن بگذارد. خود این کامپایلر قطعا حجم قابل توجهی را می گیرد بنابراین ما می توانیم با استفاده از یک سرور، کدهای Vue خودمان را از قبل کامپایل و تکمیل کنیم تا نیازی به کامپایلر نباشد و کدهای آماده به مرورگر کاربر ارسال شود. با حذف کردن کامپایلر معمولا حجم پکیج Vue حدود 30 درصد کاهش پیدا می کند.
به نظرم مقدمه کافی است. در قسمت بعد به سراغ استفاده از Vue CLI می رویم.
- نصب و راهاندازی فریمورک 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