
یکی از چیزهایی که در برنامه های بزرگ به آن نیاز داریم، environment variables (متغیرهای محیطی) است. این متغیرها به نوعی متغیرهای پیکربندی یا مقادیری سراسری هستند که توسط شما به برنامه هایتان تزریق می شوند و در محیط production (استفاده رسمی از سایت) و development (توسعه و کدنویسی سایت) با هم فرق می کنند. اگر بخواهم یک مثال برایتان بزنم، URL ها گزینه مناسبی هستند؛ مثلا اگر برنامه ما API خاصی داشته باشد، در هنگام توسعه درخواست های خود را به آن ارسال می کنیم و معمولا همیشه آن را باز می گذاریم تا کار کردن با آن راحت باشد اما در محیط production نباید از آن استفاده کنیم و به همه کاربران دسترسی بدهیم. در حالت عادی باید کدهای خود را نوشته و environment variables را به صورت دستی تغییر دهیم اما خیلی بهتر است که همه این مقادیر را یکجا داشته باشیم و زمانی که می خواهیم به محیط production منتقل شویم، با یک دستور و به صورت خودکار تمام این URL ها و API ها و غیره را تغییر دهیم.
خوشبختانه VUE CLI جدید از این قابلیت پشتیبانی می کند. من نمی خواهم در این جلسه API طراحی کنیم بلکه طور دیگری با این قابلیت آشنا می شویم. ما می توانیم یک URL را به صورت ساده در برنامه خود چاپ کنیم (در هر کامپوننتی که می خواهید):
<p>https://dev.api.com</p>
ما اگر برنامه را با دستور npm run serve باز کنیم، این URL فرضی را در قالب یک تگ <p> می بینیم. فرض ما این است که این URL یک Endpoint برای development API برنامه (همان API ای که در هنگام کدنویسی از آن استفاده می کنیم) می باشد و باید فقط زمان Development نمایش داده شود. برای این کار به جای آنکه این URL را به صورت مستقیم در فایل خود بنویسیم در یک فایل جداگانه قرار می دهیم. برای این کار یک فایل جدید به نام env. (در پوشه پروژه خودتان که برای من VUE-CLI-NEW است) ایجاد کنید. این نام یک نام خاص است و توسط CLI شناخته می شود بنابراین نمی توانید نام آن را تغییر بدهید.
شما می توانید در این فایل، مقادیری را تعریف کرده و در پروژه خود از این مقادیر مستقیما استفاده کنید. البته نحوه تعریف مقادیر حتما باید بر اساس الگوی زیر باشد:
VUE_APP_NAME = value
یادتان باشد که فایل env. اصلا جاوا اسکریپت نیست بنابراین نیازی به const یا let یا علامت ; در انتهای خط ندارد و باید به جای NAME از نام دلخواه خودتان استفاده کنید. همچنین استفاده از VUE_APP در ابتدای نام برای تزریق شدن در برنامه شما الزامی است. اگر نام خود را با ساختار دیگری غیر از این بنویسید، دیگر نمی توانید در کامپوننت های خود از آن استفاده کنید. با این حساب می توان گفت:
VUE_APP_URL = https://dev.api.com
از این به بعد من می توانم از VUE_APP_URL در هر قسمتی از پروژه خودم استفاده کنم. حتی در شیء VUE یا store خود که با vuex ساخته اید یا router و هر جایی که فکرش را بکنید. البته یک استثناء فنی وجود دارد. ما نمی توانیم کد خود را به شکل زیر بنویسیم:
<p>{{ VUE_APP_URL }}</p>
چرا؟ به دلیل اینکه String interpolation برای خصوصیات موجود در data کار می کند و با اینکه مقدار VUE_APP_URL در همه جا هست، اما به عنوان یک خصوصیت در Data برنامه وجود ندارد. بنابراین باید ابتدا آن را به عنوان یک خصوصیت در data تعریف کنیم:
<script> export default { data() { return { url: process.env.VUE_APP_URL }; } }; </script>
برای دسترسی به مقادیر فایل Env همیشه باید ابتدا به process.env دسترسی داشته باشید. حالا می توانیم در قسمت Template از کامپوننت خودمان بگوییم:
<p>{{ url }}</p>
البته برای اینکه این کد کار کند باید یک بار dev server (همان دستور npm run serve) را غیر فعال کرده (کلید های Ctrl + C) و سپس دوباره npm run serve را اجرا کنید. حالا اگر مقدار را در فایل env تغییر دهید، در همه جای برنامه شما تغییر خواهد کرد.
مسئله جالب تر این است که ما در اصل چندین فایل env داریم!
- فایل development. فقط در هنگام توسعه استفاده می شود.
- فایل production. فقط در هنگام build نهایی و در پروژه واقعی استفاده می شود.
- فایل test. برای testing (تست های مختلف کد مانند unit testing) استفاده می شود.
بنابراین اگر کد زیر را درون env.development. تعریف کنیم، فقط هنگامی که از npm run serve استفاده کنیم، از مقادیر درون آن استفاده خواهد شد. همچنین برای env.production. فقط هنگام npm run build و برای env.test. فقط هنگام npm run test استفاده می شود.
پاسخ: در چنین حالتی اولویت با فایلی است که دقیقا مشخص کند مربوط به چه بخشی است بنابراین با اجرای npm run serve از فایل env.development. استفاده می شود. فایل env. خالی نیز به برای حالت production استفاده خواهد شد.
این یکی از قابلیت های بسیار کاربردی در نسخه جدید 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