آموزش آسان فریم ورک محبوب Vue.js – قسمت اول

تبلیغات
کانال تلگرام فتولیا

فریم ورک Vue.js یک فریم ورک اصطلاحا Progressive جاوا اسکریپت است که روی تولید رابط کاربری فوکوس کرده است. ویو جی اس فقط روی لایه نمایش کار می کند و هیچ کاری با middleware یا backend ندارد و به همین دلیل می تواند به راحتی با بقیه پروژه ها و کتابخانه ها تلفیق شود. Vue.js ابزار زیادی برای لایه نمایش ارائه می کند و می توان از آن برای ایجاد سایت های تک صفحه ای (SPA) قدرتمند بهره برد. یکی از مهم ترین قابلیت های این فریم ورک کامپوننت های هستند که شما می توانید بخش های مختلف سایت را به صورت کامپوننت از هم تفکیک کنید. تعدادی از قابلیت هایی که Vue ارائه می کند به این صورت است:

  • رابط های کاربری واکنش پذیر
  • Data Binding
  • دستورات
  • بخش Template
  • کامپوننت
  • هندل رویدادها
  • انیمیشن ها و ترنسشن های CSS
  • فیلترها

کتابخانه هسته Vue.js نسخه ۲ خیلی کم حجم بوده و فقط ۱۷KB است. بدین ترتیب می توان مطمئن بود حجم اضافی که به سایت اضافه می شود بسیار کم بوده و پروژه سریع خواهد بود.

وب سایت Vue.js در این آدرس موجود است : https://vuejs.org

چگونه از Vue.js استفاده کنیم؟

راه های مختلفی برای اضافه کردن آن به وب سایت وجود دارد:

  • استفاده از CDN با گذاشتن تگ <script> در فایل HTML
  • نصب با استفاده از Node Package Manager یا همان NPM
  • نصب با استفاده از Bower
  • استفاده از Vue-cli برای راه اندازی پروژه
در همین رابطه :   آموزش عبارات (Expression) در AngularJs

در ادامه ما از روش آخر استفاده می کنیم و با Vue-cli یک پروژه جدید ایجاد کرده و Vue.js را نصب خواهیم کرد.

استفاده از Vue-cli

ابتدا باید Vue-cli را نصب کنیم. ما از خط فرمان برای نصب استفاده می کنیم و باید Node.js و دستور npm روی سیستم شما در دسترس باشد و به اینترنت متصل باشید. برای تست دستور زیر را وارد کنید و اگر نسخه npm را دیدید یعنی دستور فوق کار می کند و می توانید آموزش را ادامه دهید:

npm -v

حالا دستور زیر را وارد کنید تا Vue CLI به صورت سراسری در کامپیوترتان نصب شود:

npm install -g vue-cli

بعد از دستور فوق می توانیم از دستور vue برای ایجاد پروژه جدید استفاده کنیم:

vue init webpack vueapp01

ما به vue گفتیم که یک پروژه جدید ایجاد کن و از تمپلیت webpack استفاده کن. همچنین اسم vueapp01 را روی پروژه گذاشتیم و اسم پوشه ما خواهد بود. اجرای دستور فوق یک سری سوالات را در خط فرمان از شما خواهد پرسید مثل شکل زیر:

حالا پروژه در پوشه vueapp01 ایجاد شده است. برای ورود به پوشه پروژه دستور زیر را وارد کنید:

cd vueapp01

پروژه نصب شده ناقص است و کتابخانه های مورد نیاز آن (Dependency) باید توسط دستور زیر به صورت اتوماتیک نصب شوند:

npm install

بعد از نصب پکیج های مورد نیاز می توانید وب سرور را در حالت توسعه (Development) اجرا کنید:

npm run dev

دستور فوق سرو را در پورت ۸۰۸۰ استارت می زند و اپلیکیشن به صورت اتوماتیک باز می شود و شکل زیر را خواهید دید:

در همین رابطه :   آموزش شروع کار با AngularJS

بعدها اگر خواستید پروژه را برای لانچ اصلی آماده کنید می توانید دستور زیر را اجرا کنید. در این صورت یک پوشه dist ایجاد می شود که شامل فایل های مورد نیاز برای اجرای پروژه است.

npm run build

ادامه دارد …

One Comment

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in ابزارها, تجهيزات همراه
بهترین ویرایشگرهای رایگان کد برای آندروید

برنامه نویسی زمانی سرگرم کننده است که با ابزار مناسب انجام شود و ابزارهای توسعه برای همین کار بوجود آمدند. تا...

Close