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

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

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

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

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

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

آموزش VueJs - فقط لاراول

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

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

  • استفاده از CDN با گذاشتن تگ script در فایل HTML
  • نصب با استفاده از Node Package Manager یا همان NPM
  • نصب با استفاده از Bower
  • استفاده از Vue-cli برای راه اندازی پروژه

در ادامه ما از روش آخر استفاده می کنیم و با 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 را روی پروژه گذاشتیم و اسم پوشه ما خواهد بود. اجرای دستور فوق یک سری سوالات را در خط فرمان از شما خواهد پرسید مثل شکل زیر:

آموزش VueJs - قسمت اول

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

cd vueapp01

 

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

npm install

 

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

npm run dev

 

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

آموزش VueJs - قسمت اول

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

npm run build

 

 

مطالب مشابه