توضیحات

فریم ورک Vue js یا ویو جی اس یکی از محبوب ترین فریم ورک های جاوااسکریپت است که با هدف توسعه رابط کاربری (UI) در سال 2014 به عنوان یک فریم ورک متن باز معرفی شد و طی سال های اخیر استفاده از آن به شدت رو به رشد بوده است.

از Vue js برای ساخت و طراحی رابط کاربری نرم افزار ها و اپلیکیشن های تحت وب و موبایل استفاده می شود. همچنین میتوانید وب سایتی پیاده کنید که تک صفحه ای ( اصطلاحا spa یا single page application ) باشد.

تک صفحه بودن یک وب سایت باعث میشود که برای درخواست های کاربران در یک وب سایت ، نیاز به ریفرش نباشد یعنی کاربر وقتی از سایت شما استفاده میکنند این احساس را داشته باشد که یک اپلیکیشن دسکتاپ نصب کرده است یا یک برنامه رو موبایل خود اجرا کرده است.

به عنوان یک فریمورک مدرن  Vue.js می‌تواند نیازهای متفاوتی را برآورده کند. این فریمورک برای داشتن کارایی بهتر از یک DOM مجازی استفاده می‌کند. (DOM مجازی، حالتی مفهومی و البته انتزاعی از یک DOM واقعی است). اهمیت این ماجرا در این است که فریمورک با استفاده از چنین تکنیکی سبک‌تر و در نهایت برای اجرا سریع‌تر می‌شود.

یکی از مهیج‌ترین موارد در  Vue.js این است که از رویکردی مبتنی بر کامپوننت برای ساخت اپلیکیشن های تحت وب استفاده می کند. این رویکرد شامل یک فایل از کامپوننت‌هاست که می‌تواند مستقل از کل پروژه باشد، نکته مهم این است که شما می‌توانید از آن چندین بار استفاده کنید و فرایند توسعه‌تان را سرعت ببخشید. این ابزار به شما کمک می‌کند که به بهترین شکل ممکن بتوانید کارهای‌تان را انجام دهید.

پیش نیاز این دوره :


javascript جاوا اسکریپت vuejs ویو جی اس

مدرس دوره علی شیخ
مدت دوره 11:02:05
تعداد ویدیو 69

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام استاد ، به نظر شما با توجه به اینکه در لاراول و vuejs به جای webpack از vite استفاده شده نیاز هست که webpack رو یاد بگیریم؟ یا میتونیم به جاش vite رو یاد بگیریم؟

    • سلام وقت بخیر.
      یادگیریش سخت نیست و خالی از لطف نیست، اما در کل بله میتوانید یادش نگیرید.

  • سلام استاد خسته نباشید ممنون از آموزش خوبتون
    توی قسمت vue cli از قسمت اکوسیستم لینکشو میارید ولی دیگه تو داکیومنت ویو قسمت cli نیست
    و به جاش npm init vue@latest هستش که از vite استفاده میکنه
    تفاوت این دو مورد به غیر اینکه تو این دستور vite جایگزین webpacke شده چیه؟

    • سلان وقت بخیر.
      یک روش دیگه هم توی vue 3 اضافه شده که میتوانید استفاده کنید. روش vue 2 هم میتوان توی vue 3 استفاده کرد.
      کامل در موردش توی دوره گفته شده

  • سلام استاد محترم - با تشکر از رحمات جنابعالی.
    دو سوال کلی در مورد فریم ورک های فرانت اند دارم:
    1- آیا می توان یک برنامه رو به صورت آف لاین و بدون استفاده از ابزار هایی مانند npm هم دولوپ کرداز این جهت می پرسم که نرم افزار من در یک شبکه داخلی باید کار کنه و دسترسی به اینترنت نداره . راهی و جود داره که وابستگی ها رو دستی وارد یک برنامه فرانت اند کنیم؟
    2- آیا می توان هم برنامه فرانت اند و بک اند رو روی یک پروژه دولوپ کنیم. مثلا من که با spring boot کار بک اند رو انجام میدم مجبورم برای فرانت یک پروژه دیگه رو روی ip دیگه بالا بیارم . میشه که هر دو داخل یک پروژه پکیج بشن چه موقع دولوپ چه موقع اجرا.
    با تشکر مجدد

    • سلام وقت بخیر.
      در مورد سوال اولتون، شاید بشه توی یک سیستم دیگه که اینترنت داره پکیج نصب کنید و پوشه node_modules را کپی کنید و مشکلی پیش نیاد، احتمالا بشه و باید تست کنید.
      سوال دومتون هم میشه با دادن پورت های مختلف به سرور و فرانت انجام داد.

    • سلام وقت بخیر.
      هیچ دوره ای کامل نیست، اما ما تمام تلاشمون را کردیم که دوره کامل باشه، بقیش کار، تمرین و تجربه و چالش هست.

  • سلام استاد وقت بخیر من وقتی میخوام یک فایل vue بسازم یا مثال همون فایل hello-world حذف میکنم و home.vue میسازم زمانی که تو اپ ایمپورت میکنم این ارور رو میده
    Component name "Home" should always be multi-word vue/multi-word-component-names
    دقیقا همون کاری ک شما تو ویدیو انجام دادین منم انجام دادم
    نمیدونم ارورش چیه
    بازم ممنون بابت اموزش های خوب شما

    • سلام وقت بخیر.
      ممنون از شما،متن ارور گفته که اسم کامپوننت باید چند کلمه ای باشه یعنی بجای اینکه Home باشه مثلا باشه HomeComponent یا HomeCom
      برای غیر فعال کردن هم توی بخش آخر دوره صحبت شده، فقط دقت کنید که پیش نیاز دوره ها بشدت مهم هستند.

  • سلام وقت بخیر استاد ممنون بابت اموزش خهای خوبتون
    من npm رو نصب کردم سراسری برای کامپوننت های جدا اما یه فایلی با پسوند vue ایجاد میکردم ارور میداد ! البته yarn رو نصب کردم npm جواب نمیداد
    بعد اینک تا اون cmd باز نباشه خروجی کار رو نمیتونیم ببینبم از از صفحه html اگه صفحه cmd رو ببندیم چطوری دوباره اجرا کنیم

    • سلام وقت بخیر.
      ممنون از شما، حتما حتما در ابتدا پیش نیاز های دوره را ببینید کار کنید و به خوبی آشنا بشید بعد این دوره را مشاهده کنید.

  • سلام استاد وقت بخیر امیدوارم حالتون خوب باشه
    استاد ببخشید من یه سوال داشتم من الان ref رو بلد هستم
    اما خواستم بدونم در چه زمان هایی مناسبه که از ref استفاده کنیم
    در این شرایط زمان استفاده کردن از ref هارو نمیدونم اگر میشه یه توضیح بدید
    سپاس

    • سلام وقت بخیر.
      ممنون از شما، برای تعاریف متغیرهاتون توی کامپوننت استفاده میکنید.دوره را کامل ببینید که پروژه پیاده سازی و ازش استفاده شده تا بهتر درک کنید.

  • سلام خسته نباشید
    من اولین بار بود که از دوره های پیجتون استفاده کردم و دوره ویو کامل راهم انداخت چ تونستم پروژم رو کامل و بدون نقص بالا بیارم.
    فقط مشکلی که هست بعد از اپلود روی سرور وقتی روی اینسپکت المنت میزنم توی قسمت سورس ها قسمت وب پک تمامممم فایل های توی فولدر sec پروژه رو و کامپوننت هام رو نمایش میده و این اصلا خوب نیست.. میشه یه راهنمایی بکنید که چطور میتونم نمایش محتویاتی وب پک رو به کاربران غیر فعال کنم؟ ممنون

    • سلام وقت بخیر.
      ممنون از شما
      دلیلش این هست که vue-cli توی حالت production به صورت پیش فرض فایل های source map که webpack ایجاد میکنه را حذف نمیکنه و شما توی تب source مشاهده میکنید.نیاز هست که این مورد را غیرفعال کنید برای اینکار فایلی به نام vue.config.js در پوشه root یا اصلی پروژه ایجاد میکنید که باهاش میتونید کانفیگ های مختلف vue-cli را داخلش قرار بدید و توی این فایل گرینه productionSourceMap: false را اضافه میکنید، به این شکل

      module.exports = {
      
      productionSourceMap: false
      };

      و دوباره دستور npm run build را اجرا کنید.

    • سلام وقت بخیر.
      این مورد مانند ارسال فایل با جاوااسکریپت هست که پیش نیاز این دوره هست و فرقی نداره، کافیه سرچ کنید آپلود فایل با جاوااسکریپت، اصلا پیچیده نیست
      در کل شما باید از کلاس FormData استفاده کنید. مثال

      const formData = new FormData()
      
      formData.append('myFile', files[0])

      fetch('/saveImage', {
      method: 'POST',
      body: formData
      })
      .then(response => response.json())
      .then(data => {
      console.log(data)
      })
      .catch(error => {
      console.error(error)
      })

      در اینجا files[0] میشه همون فایلی که از input مورد نظر دریافت کردید

    • سلام وقت بخیر.
      چیز خیلی سختی نیست، پس یادش بگیرید.من توی دوره گفتم بخاطر اینکه شاید توی پروژه ای، جای ببینید و براتون سوال بشه

    • سلام وقت بخیر.
      والا همینجور که نمیشه گفت، باید ببینید ارور دارید یا خیر، درست کد ها را نوشتید و ....
      با سورس کدی که در اختیارتون هست مقایسه کنید.

    • سلام وقت بخیر
      فهمیدم مشکل از کجاست
      این کدها مشکلمو برطرف کرد

         import Vue from 'vue'
      
      import CompositionApi from '@vue/composition-api'
      Vue.use(CompositionApi)

    • چک کنید که ورژن چند vue را نصب کردید توی package.json باید ورژن ۳ را نصب کرده باشید.

  • سلام و عرض ادب استاد
    من دوره ی لاراول رو گذرونده بودم، اما دوره ی لاراول شما رو که دیدم واقعا حیرت زده شدم که با چه ظرافتی تمام جوانب لازم رو پوشش دادین و حتی کدهای هر آموزش از قبل آماده شده بود. بهترین کیفیتی که میشه متصور شد برای یک آموزش!
    الان هم که میبینم دوره ی Vue js رو خود شما باز هم (رایگان) گذاشتید، واقعا نمیدونم چی بگم
    سپاسگذارم و قلبا آرزوی موفقیت و سلامتی براتون دارم

    • سلام وقت بخیر.
      ممنون از شما، خداروشکر دوره ها براتون مفید بوده🙏

  • سلام روز بخیر استاد یه سوال همونطور که توی پروژه آخر کار ها رو انجام دادید منم همون کارا رو انجامم دادم ولی وقتی وارد صفحه یک کاربر میشم صفحه رو که ریلود میکنم صفحه سفید میشه و حتما باید به صفحه قبل یعنی لیست کاربران برگردم و صفحه رو رفرش کنم و بعد دوباره به کاربر برگردم
    دلیلش چی میتونه باشه؟؟؟؟؟؟

    • سلام وقت بخیر.
      توی سرور یا لوکال؟ inspect میگیرید توی بخش console ارور چی میده؟