
در قسمت قبل پروژه خود را تکمیل کردیم و حالا نوبت به سوال مهمی می رسد. چطور از پروژه خود خروجی بگیریم؟ ما در نهایت می خواهیم برنامه خود را روی یک سرور واقعی قرار دهیم ولی از طرفی دوست نداریم تک تک این فایل ها را به صورت دستی و با تگ <script> وارد فایل index.html کنیم. این کار باعث می شود تعداد درخواست های ما بسیار بیشتر از حد معمول شود و وب سایت ما با سرعت بسیار کمی بارگذاری شود.
راه حل ما استفاده از اسکریپت های دیگر Vue-CLI است. اگر فایل package.json را باز کنید، اسکریپت های زیر را در آن خواهید دید:
"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" },
همانطور که می بینید ما دو اسکریپت متفاوت داریم که تا این لحظه فقط از dev (همان npm run dev) استفاده می کردیم. npm run dev باعث می شود سرور توسعه webpack اجرا شده و قابلیت هایی مانند auto-refresh به آن اضافه شود. همچنین با اجرای این اسکریپت هیچ فایلی را دریافت نمی کردیم بلکه فایل نهایی ما در مموری سیستم بارگذاری شده و از همانجا اجرا می شد. اسکریپت بعدی و مورد نظر ما در این جلسه build است که برای گرفتن خروجی نهایی از آن استفاده می شود:
npm run build
با اجرای این کد، پوشه ای به نام Dist برایتان ایجاد می شود که درون آن دو فایل به نام های build.js و build.js.map را خواهید داشت. من در ادامه توضیحات بیشتری در مورد فایل map می دهم اما فعلا روی build.js تمرکز می کنیم. فایل build.js همان برنامه نهایی شما است و اگر آن را باز کنید چیزی به شکل زیر را می بینید (من فقط قسمتی از کد را آورده ام):
!function(t){function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n={};e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.............
همانطور که می بینید کدها بسیار بهم ریخته هستند. به این عملیات، minification یا کوچک سازی کدها می گویند که باعث می شود کد شما بسیار کوچک تر شده و حجم کمتری پیدا کند. خوشبختانه ما در این دوره از Vue-CLI استفاده کردیم بنابراین این فایل به صورت خودکار و آماده برای ما تولید شده است تا در فایل HTML قرار گرفته و اجرا شود. این عملیات انواع و اقسام موارد اضافی (مانند خطاها و هشدارهای Vue.js یا کامنت های موجود یا هر چیزی که در محیط production غیر ضروری باشد) را حذف می کند تا برنامه به کوچکترین حالت ممکن تبدیل شود.
شما می توانید از انواع و اقسام سرویس های میزبانی وب برای میزبانی برنامه خود استفاده کنید اما چند مسئله مهمی وجود دارند. اولا اگر می خواهید فایل dist را روی سیستم خود و به صورت محلی ببینید، باید از سرور خاص node.js استفاده کنید. احتمالا می گویید مگر فایل index.html چنین کدی را در خود ندارد؟
<body> <div id="app"> </div> <script src="/dist/build.js"></script> </body>
بله این فایل، کد نهایی ما در پوشه dist را لینک کرده است اما اگر یادتان باشد برنامه ما SPA (همان single page application) است و من در قسمت routing توضیح دادم که باید سرور طوری تنظیم شود که تمام درخواست ها به فایل index.html برسد. مشکل این است که اگر فایل index.html را بدون سرور و به صورت عادی در مرورگر باز کنید از پروتکل //:FILE (که برای باز کردن فایل ها می باشد) استفاده خواهید کرد و این پروتکل دستورات را به index.html نمی فرستد. همچنین حتی اگر در تنظیمات فایل vue.config.js خصوصیت publicPatch را مشخص کنید باز هم به مشکل می خوریم. چرا؟ به دلیل اینکه PublicPath در برنامه های MPA یا برنامه هایی که مانند برنامه ما در Vue-router از mode هیستوری (history) استفاده می کنند، کار نمی کند. یکی از سرور های node.js که به مشکل ما را حل می کند، سروری به نام serve است:
برای کار با این سرور باید ابتدا دستور زیر را در ترمینال خود اجرا کنید:
npm install -g serve
با این کار، سرور Serve را به صورت سراسری نصب خواهیم کرد. سپس فایل index.html و پوشه dist را از پروژه خود انتخاب کرده و در یک پوشه جدید کپی کنید. این کار را می کنیم تا فایل index.html و پوشه dist با هم در یک پوشه جداگانه باشند (من نام پوشه را vuejs گذاشته ام). حالا ترمینال را در آدرس پوشه vuejs (یا هر نامی که برای پوشه خود انتخاب کرده اید) باز کرده و دستور زیر را اجرا می کنم:
serve -s
s- برای سرور Serve مشخص می کند که برنامه ما SPA است. حالا فایل build.js که فایل نهایی پروژه است برای شما اجرا می شود. پس از اجرای این دستور ترمینال پیام زیر را به شما می دهد:
Serving! - Local: http://localhost:5000 - On Your Network: http://175.4.5.61:5000
شما مسیر http://localhost:5000 را در مرورگر خود کپی کنید تا برنامه را ببینید.
در ضمن فایل vue.config.js فایلی است که تنظیمات پیکربندی را از شما قبول می کند. این تنظیمات همان تنظیماتی بود که در پروژه های Webpack در فایل webpack.config.js انجام می دادیم. اگر با فضای webpack آشنایی ندارید و دوست دارید در مورد آن بیشتر بدانید به دوره آموزش Webpack روکسو ما مراجعه کنید.
در آخر در مورد فایل build.js.map باید بگویم که این فایل به شما اجازه می دهد که به سورس کد اولیه سایت خود دسترسی داشته باشید. برای این کار پس از باز شدن مرورگر از devtools (کلید f12) به سربرگ source می رویم. سپس در آنجا قسمتی به نام webpack را مشاهده می کنید که فایل های شما را قبل از کامپایل شدن و به صورت minify نشده در اختیارتان می گذارد تا بتوانید آن ها را در مرورگر Debug کنید:

اگر بعضی از مفاهیم این جلسه برایتان نامفهوم بود نگران نباشید. در یکی از فصل های پیوست که در ادامه می آید، در مورد قابلیت های جدید Vuel-CLI (نسخه 3) صحبت خواهیم کرد.
- نصب و راهاندازی فریمورک 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