
در قسمت قبل به شما توضیح دادم که چرا به یک سرور محلی و محیط توسعه نیاز داریم. ما می توانیم خودمان چنین محیط توسعه ای را ایجاد کنیم. مثلا با استفاده از Webpack و یکی از loader های خاص آن به نام Vue-loader یک محیط توسعه مناسب راه اندازی کنیم که single file template ها را کامپایل و ادغام کند. با این همه اصلا نیازی نیست که خودمان شروع به پیکربندی و راه اندازی چنین محیطی کنیم بنابراین من در این دوره چنین کاری را انجام نخواهم داد.
ما در این دوره از Vue CLI استفاده می کنیم که کارش دریافت template های پروژه های Vue است: یعنی پروژه هایی خالی و از قبل آماده شده را دریافت می کند که آماده کدنویسی است. برای نصب Vue CLI باید دستور زیر را در ترمینال خود اجرا کنید:
npm install -g vue-cli
این دستور Vue CLI را به صورت سراسری روی سیستم شما نصب خواهد کرد. با نصب این پکیج به template (قالب) های مختلفی دسترسی خواهیم داشت. مثلا یکی از آن ها simple یا «ساده» نام دارد که یک فایل index.html به علاوه دستور import فریم ورک Vue است (دقیقا همان چیزی که تا این قسمت داشته ایم). پکیج بعدی webpack-simple است که یک محیط توسعه مناسب را به ما می دهد و از Webpack استفاده می کند. ما در طول این دوره از همین پکیج استفاده می کنیم. پکیج بعدی یک پکیج بسیار بزرگ تر است که قابلیت های Testing و جزئیات بسیار زیادی را در خود دارد و webpack نامیده می شود. ما در این دوره نمی خواهیم وارد پیش پردازنده های CSS و مباحث testing بشویم بنابراین این پکیج به درد ما نمی خورد. در نهایت پکیج بعدی browserify است که معادل همان weback یا weback-simple می باشد (بسته به اینکه چه نسخه ای از آن را نصب کنید) اما از آنجایی که Webpack ابزار مناسب تر و مشهورتری می باشد من از webpack-simple در این دوره استفاده خواهم کرد. در ضمن به غیر از پکیج اول (simple) تمام پکیج های دیگر کد ها را کامپایل می کنند بنابراین کد های ما سبک تر شده و نیازی به داشتن کامپایلر Vue نیست.
راه اندازی و نصب Vue CLI
برای شروع یک پنجره ترمینال را باز کرده و دستور زیر را در آن اجرا کنید:
npm install -g vue-cli
اگر از mac استفاده می کنید باید دستور زیر را اجرا کنید:
sudo npm install -g vue-cli
نکته: برای اجرای دستور بالا به nodejs نیاز دارید. بنابراین به وب سایت رسمی nodejs سر زده و آن را دانلود کنید. ما هیچ کد nodejs ای نخواهیم نوشت اما به پکیج npm آن نیاز داریم و تنها دلیل نصب آن هم همین است.
حالا برای اینکه بتوانیم یک پروژه جدید را بسازیم باید ابتدا به پوشه مورد نظر خودمان برویم. مثلا یک پوشه جدید بسازید و نام آن را Vue Training قرار بدهید. سپس ترمینال را باز کرده و دستور زیر را اجرا کنید:
Vue init webpack-simple vue-cli
توجه داشته باشید که vue-cli در دستور بالا نام پوشه ای است که پروژه در آن ایجاد خواهد شد بنابراین می توانید آن را کاملا تغییر دهید. همچنین در صورتی که می خواهید پروژه در پوشه فعلی شما ایجاد شود قسمت آخر را ذکر نکنید. مثلا:
Vue init webpack-simple
من همان دستور اول را اجرا می کنم تا پوشه جدیدی به نام vue-cli برایم ایجاد شود. پس از اجرای این دستور در همان صفحه ترمینال از شما پرسیده می شود که ابتدا نام پروژه (project name) سپس توضیحات پروژه (project description) و نهایتا نام نویسنده/توسعه دهنده پروژه (Author) را تعیین کنید. در نسخه های جدید از شما پرسیده می شود که license را نیز انتخاب نمایید که همان مقدار پیش فرض (MIT) کافی است (چیزی تایپ نکنید و فقط enter بزنید) سپس سوال نهایی این است که آیا از SASS استفاده خواهید کرد؟ ما فعلا چنین کاری نمی کنیم بنابراین n را تایپ کرده (مخفف no) و enter بزنید.
پس از وارد کردن این مقادیر (همگی به سلیقه خودتان بستگی دارند) از شما خواسته می شود که ابتدا دستور cd vue-cli را اجرا کنید تا ترمینال وارد پوشه vue-cli شود. سپس دستور npm install را اجرا می کنید تا وابستگی های این پروژه دانلود شود (کمی طول می کشد) و نهایتا با اجرای npm run dev می توانیم سرور مجازی خود را راه بیندازیم.
معمولا با اجرای npm run dev پروژه ما به صورت خودکار روی پورت 8080 در مرورگر باز می شود اما اگر نشد، کافی است آدرسی را که به شما داده شده است (localhost:8080) در مرورگر وارد کنید. حالا اگر وارد پوشه vue-cli بشوید، چند فایل وجود دارد که باید آن ها را برایتان توضیح بدهم. ابتدا پوشه ای به نام src داریم که پوشه اصلی ما است و سورس کد Vue را در آنجا می نویسیم (بعدا مفصلا در مورد آن صحبت می کنیم). سپس فایلی به نام babelrc. وجود دارد که مربوط به پیکربندی Babel است (یک ترنسپایلر که کد های ES6 ما را به صورت خودکار به ES5 تبدیل می کند). چرا به Babel نیاز داریم؟ به دلیل اینکه نوشتن کد های ES6 بسیار ساده تر است اما در مرورگر های قدیمی پشتیبانی نمی شود. فایل gitignore. مخصوص سیستم git است که ما با آن کاری نداریم. فایل index.html همان فایلی است که به کاربر ارسال می شود (یعنی همان فایلی که در آدرس localhost:8080 باز شده است).
فایل بعدی ما package.json است که حتما با آن آشنا هستید. این فایل مسئول نگهداری و مدیریت وابستگی های پروژه ما است و به خاطر npm ایجاد شده است. وضعیت بخش وابستگی های پروژه در این فایل به شکل زیر است:
"dependencies": { "vue": "^2.5.11" },
یعنی وابستگی ما تنها vue است (البته فقط برای production). برای حالت توسعه (development) وابستگی های زیادی داریم:
"devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" }
پکیج vue-loader در بالا بسیار مهم است چرا که به ما اجازه می دهد از قابلیت single file template ها استفاده کنیم (بعدا بیشتر در این مورد صحبت خواهیم کرد).
فایل webpack.config.js نیز مسئول پیکربندی و رفتار Webpack است. مثلا اینکه هر فایلی که پسوند vue داشته باشد باید به loader مربوط به vue ارسال شود (همان vue-loader):
{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }
پیشنهاد می کنم به دوره آموزشی webpack در روکسو سر بزنید تا با این فایل بیشتر آشنا شوید. البته در طول دوره کمی با این فایل کار خواهیم کرد.
اینها فایل های مهم پروژه ما هستند. در قسمت بعد وارد فایل app.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
خیلی ممنون تازه فهمیدم منظور از ترمینال همون cmd بوده.
سلام و خسته نباشید
واقعا ممنونم از این آموزش خوب و جامعتون
یک سوال داشتم اگر پاسخ بدید خیلی ممنون میشم. راستش من تازه کارم و حتی نمیدونم ترمینال چیه و چطوری باید باهاش کار کنم. هر چقدر هم سرچ کردم چیزی که بفهمم و به درد این آموزش بخوره پیدا نکردم. مقدمه آموزش Webpack هم توضیحاتی داده بود ولی اونجا هم ترمینال رو توضیح نداده و الان من اصلا نمیدونم این کد ها رو کجا باید بزنم. میشه من رو راهنمایی کنید؟