ثبت نام

امکان عضویت غیر فعال است

آموزش نصب و راه اندازی Vue js

vue-js

آموزش نصب و راه اندازی Vue js

Vue Js

با سلام, در این آموزش قصد دارم تا نصب Vue را به شما آموزش دهم.
همچنین در انتها خواهم گفت چطور Vuetify, یکی از محبوب ترین رابط های کاربری در Vue را چگونه به پروژه خود اضافه کنید.
اگر هیچ آشنایی با فریم ورک (framework) و Vue ندارید تمام اینها در ادامه همین پست برای شما توضیح داده می شود.

فریم ورک (framework) چیست؟

فریم ورک در کلمه به معنلی چهارچوب کاری و در عمل نیز معنای مشابه ای میدهد.
اگر با زبان های برنامه نویسی یا علامت گذاری مثل HTML یا Css کار کرده باشید,
میتوانید درک کنید که گاهی نوشتن برخی از کد ها تنها وقت شمارا میگیرد و کپی کردن آنها کاری ساده تر و بهتر میباشد.

برای مثال طراحی یک دیالوگ باکس در HTML با کمک Css و Javascript نیازمند آشنایی تقریبی شما با این ۳ زبان و همچنین صرف مدت زمان تقریباً طولانی میباشد.
اما فریم ورک ها کار را برای شما ساده تر میکنند و شما تنها با جا گذاری و استفاده از کلاس ها و فرم های از پیش آماده در کوتاه ترین زمان ممکن میتوانید ایده و طرح خودرا پیاده سازی کنید.
هرچند این بدان معنی نیست که شما میتوانید بدون هیچ دانشی این کار را انجام دهید!

Vue چیست؟

ابتدا نگاهی به ماهیت اصلی Vue js بیاندازیم.
همان طور که در نام این فریم ورک نیز آمده است این فریم ورک با Javascript ساخته شده است.
Vue js فریم ورکی پیشرو در زمینه ساخت محیط های کاربری تحت وب مباشد.
این فریم ورک برخلاف دیگر فریم ورک های مشابه از ۰ تا ۱۰۰ نوشته شده است!
به این معنی که در این فریم ورک از کامپوننت های خارجی هیچ استفاده ای نشده است.
کارایی اصلی Vue js زمانی مشخص میشود که شما میتوانید به سادگی این فریم ورک را در کنار دیگر پروژه های خود نصب و راه اندازی کنید.

از دیگر ویژگی های Vue js میتوان به طراحی آن برای (وبسایت های تک صفحه ای – Single Page Applications) یا همان SPA اشاره کرد.
در کوتاه ترین توضیح ممکن, SPA به صفحاتی میگویند که بدون رف رش شدن درخواست های کاربر را اجرا میکنند.
برای مثلا Gmail, Google Maps, Youtube, Instagram (Web Version), Google Translate و … اشاره کرد.
همچنین برای کسب اطلاعات بیشتر در رابطه با Vue js میتوانید سری به وب سایت آن بزنید.

ابزار مورد نیاز

برای نصب Vue شما نیاز به چند ابزار دیگر نیز دارید.
برای شروع ابتدا NPM را نصب کنید و یک ویرایشگر متن مناسب نیز آماده کنید.
اگر نمیدانید NPM چیست اینجارا کلیک کنید و اگر هیچ ویرایشگر متنی ندارید اینجارا کلیک کنید.
پس از این که مطمئن شدید ابزار لازم را بر روی سیستم خود دارید مراحل نصب را دنبال کنید.

برای نصب و راه اندازی Vue جند روش وجود دارد که ۲ روش آنرا به شما خواهم گفت.
ابتدا نصب با Vue CLI و سپس استفاده از CDN که هر ۲ روش را در این آموزش به شما خواهم گفت.

نصب Vue CLI با استفاده از NPM

برای نصب Vue ابتدا Vue CLI را نصب میکنیم.
با نصب Vue CLI شما قادر خواهید بود هر زمان که لازم داشتید Vue را نصب کنید و از دیگر امکانات آن نیز بهتره مند شوید.
برای نصب Vue CLI کافیست دستور زیر را در CMD نوشته و سپس Enter بزنید.
npm install -g @vue/cli پس از اجرا کردن این دستور با صفحه ای مشابه با صفحه زیر مواجه میشوید

vue cli installation

این مرحله ممکن است مدت زمان زیادی طول بکشد که بستگی به سرعت اینترنت شما دارد.
دقت داشته باشید که در این مرحله و در هنگام دانلود نباید هیچ خطایی رخ دهد.
خطا ها در NPM با رنگ قرمز و با پیشوند ERR! نشاد داده میشوند, در صورتی که با خطا مواجه شدید دنبال راه حلی برای رفع آن بگردید.
وجود Warning - WARN جای نگرانی ندارد.

برای این که مطمئن شوید Vue CLI به درستی بر روی سیستم شما نصب شده است تنها دستور زیر را در CMD وارد کنید.
vue -V اگر همه چیز به درستی پیش رفته باشد شما باید عدد ورژن Vue CLI فعلی خودرا ببینید.

نصب و اجرای Vue با استفاده از Vue CLI

پس از نصب Vue CLI نوبت به نصب Vue میرسد.
ابتدا کنسول یا همان CMD را باز کنید.
سپس با دستورات CMD دایرکتوری فعلی را به محلی که میخواهید پروژه تان را در آنجا ذخیره کنید بروید.
برای مثال ما در این آموزش پروژه مان را در مسیر E:/projects/Vue نصب میکنیم, برای این کار مانند تصویر زیر عمل میکنیم :

cd command in cmd

حال که محل مورد نظر برای نصب را انتخاب کرده اید تنها یک قدم دیگر مانده است!
برای نصب Vue تنها کافیست دستور زیر را بنویسید
vue create my_first_app دقت داشته باشید که بجای my_first_app نام پروژه خودرا وارد کنید.

(دقت داشته باشید که شما قادر نیسیتید از فاصله و یا کاراکتر های خاص در نام پروژه استفاده کنید!)

پس از این که دستور بالا را وارد کردید با صفحه ای مشابه به تصویر زیر مواجه میشوید.
با انتخاب گزینه اول میتوانید بدون تنظیمات اضافی Vue را نصب کنید.

vue installation settings

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

vue installation progress

اگر همه چیز به درستی انجام شود در انتها با صفحه ای مشابه با تصویر زیر مواجه میشوید

vue installation completed

برای اجرای پروژه Vue ابتدا به محل پروژه بروید (از طریق دستورات CMD) که در تصویر بالا C:/Users/NullEe/my_first_app میباشد.
پس از آن دستور npm run serve را اجرا کنید تا پروژه شما اجرا شود (پس از اجرای این دستور ممکن است کمی زمان ببرد تا پروژه شما اجرا شود)

vue js server runing

برای دیدن پروژه Vue خود تنها کافیست آدرس بالا (http://localhost:8080) را در مروگر خود وارد کنید (ممکن است این آدرس برای شما متفاوت باشد).
اگر به درستی تمام مراحل را انجام داده باشید صفحه ای مشابه با تصویر زیر را خواهی دید.

vue js index page

همچنین برای این که بتوانید پروژه خودرا در اختیار دیگران بگذارید تنها کافیست دستور npm run build را اجرا کنید.
با اجرای این دستور فولدر جدید با نام (dist) در فوادر اصلی پروژه شما ایجاد میشود.
شما میتوانید به سادگی فایل های درون آنرا به اشتراک بگذارید و یا بر روی سرور خود قرار دهید.

راه اندازی Vue با استفاده از CDN

اگر زمان و امکانات لازم برای اجرا و نصب Vue از طریق NPM را ندارید تنها کافیست از Vue CDN استفاده کنید.
برای این کار ابتدا فایلی با نام index.html ایجاد کنید.
سپس فایل Vue را با استفاده از کد زیر به هدر صفحه خود اضافه کنید

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

حال یک div جدید با آی دی app ایجاد کنید, مانند قطعه کد زیر
<div id="app">{{message}}</div>
و در آخر قطعه کد زیر را در یک تگ جدید script قرار دهید.

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

حالا تنها کافیست فایل html خودرا باز کنید تا پیام Hello Vue را ببینید!

اضافه کردن Vuetify به پروژه Vue با استفاده از NPM

ابتدا دستورvue add vuetify را در فولدر اصلی پروژه اجرا کنید.
پس از اجرای این دستور Vuetify به پروژه شما اضافه و فعال میشود.
با اجرا پروژه با صفحه جدیدی که ساخته شده توسط Vuetify میباشد مواجه میشوید.
همچنین برای شخصی سازی تم و یا راستچین سازی آن میتوانید فایل vuetify.js را در فولدر plugins ویرایش کنید.

اضافه کردن Vuetify به پروژه Vue با استفاده از CDN

برای افزودن Vuetify با استفاده از CDN تنها کافیست تا فایل های Css و Js این پلاگین را به هدر صفحه خود بیافزایید.

<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

همچنین اگر تمایل به استفاده از فونت های متریال دارید میتوانید فایل زیر را به هدر صفحه اضافه کنید

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">

دیدگاه ها

  • داریوش مهر ۲۲, ۱۳۹۸ :: ۱۱:۵۶
    0 0

    سپاس

ارسال دیدگاه

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

راه های ارتباط با ما

ما را در شبکه های اجتماعی دنبال کنید!