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

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

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

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

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

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

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

cd vueapp01

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

npm install

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

npm run dev

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

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

npm run build

ادامه دارد …