آموزش Vue.js: ایجاد و میزبانی یک سایت کامل پشته

سرفصل ها و درس ها

مقدمه Introduction

• با Vue.js یک سایت پشته ای کامل ایجاد و میزبانی کنید Create and host a full-stack site with Vue.js

• آنچه شما باید بدانید What you should know

• Node.js و npm را نصب کنید Install Node.js and npm

• انتظار از این دوره چیست What to expect from this course

1. Vue.js Front End ایجاد کنید 1. Create a Vue.js Front End

• چرا Vue؟ Why Vue?

• یک پروژه Vue را راه اندازی و اجرا کنید Set up and run a Vue project

• ساختار پروژه Vue Vue project structure

• مسیریابی در Vue Routing in Vue

• داده ها ، سبک ها و تصاویر را اضافه کنید Add data, styles, and images

• صفحه محصول ایجاد کنید Create a product page

• صفحه جزئیات محصول ایجاد کنید Create a product detail page

• صفحه سبد خرید ایجاد کنید Create a shopping cart page

• یک نوار پیمایش ایجاد کنید Create a navigation bar

• یک صفحه 404 در Vue ایجاد کنید Create a 404 page in Vue

• از اجزای مدولار استفاده کنید Use modular components

• چالش: اجزای مدولار Challenge: Modular components

• راه حل: اجزای مدولار Solution: Modular components

2. Node Back End ایجاد کنید 2. Create a Node Back End

• چرا Node.js؟ Why Node.js?

• یک سرور Express تنظیم کنید Set up an Express server

• سرورها را با پستچی تست کنید Test servers with Postman

• پارامترهای مسیر در اکسپرس Route parameters in Express

• از سرور داده بگیرید Get data from a server

• برای راه اندازی مجدد سرور از Nodemon استفاده کنید Use Nodemon to restart a server

• داده های سرور را ایجاد و حذف کنید Create and delete server data

3. MongoDB را به قسمت Back Back اضافه کنید 3. Add MongoDB to Your Back End

• چرا MongoDB؟ Why MongoDB?

• MongoDB را بارگیری و نصب کنید Download and install MongoDB

• MongoDB را به یک سرور Node.js اضافه کنید Add MongoDB to a Node.js server

• MongoDB را به نقاط انتهایی GET اضافه کنید Add MongoDB to GET endpoints

• در MongoDB داده ایجاد کنید Create data in MongoDB

• حذف داده ها در MongoDB Delete data in MongoDB

4. قسمت جلویی و انتهای پشت را بهم متصل کنید 4. Connect the Front End and Back End

• معرفی کتابخانه axios Introduction to the axios library

• داده ها را از سرور ، قسمت 1 بارگیری کنید Load data from the server, part 1

• داده ها را از سرور ، قسمت 2 بارگیری کنید Load data from the server, part 2

• موارد را به سبد خرید اضافه کنید Add items to the shopping cart

• رابط کاربری افزودن به سبد خرید را بهبود ببخشید Improve the add-to-cart interface

• موارد را از سبد خرید خارج کنید Remove items from the cart

• چالش: مورد موجود در سبد خرید است Challenge: Item already in cart

• راه حل: مورد موجود در سبد خرید است Solution: Item already in cart

5. میزبان سایت خود باشید 5. Host Your Site

• روند انتشار The release process

• جلوی Vue را بسازید و به آن سرویس دهید Build and serve a Vue front end

• Heroku و MongoDB را تنظیم کنید Set up Heroku and MongoDB

• از متغیرهای محیطی در هروکو استفاده کنید Use environment variables in Heroku

• کد را به هروکو فشار دهید Push code to Heroku

نتیجه Conclusion

• مراحل بعدی Next steps