آموزش نصب ویو جی اس (Vue Js) + ویدئو

محمدامین سعیدی راد

1399/08/03

83

ویو جی اس رو میشه به چندین روش نصب و استفاده کرد که ممکن است برخی از دوستان در زمینه نصب و استفاده از آن مشکل داشته باشند، تو این مقاله قصد داریم آموزش نصب ویو جی اس (Vue Js) را داشته باشیم.

در صورت تمایل می توانید آموزش رایگان جاوا اسکریپت مقدماتی تا پیشرفته را مطالعه کنید.

آموزش نصب ویو جی اس (Vue Js)

آموزش نصب ویو جی اس (vue js)

روش استفاده از CDN

یکی از روش های نصب Vue Js استفاده از cdn هست؛

شما می توانید cdn مربوط به فایل vue js را از داکیومنت خودش به آدرس https://vuejs.org/ دریافت کرده و به روش گفته شده پروژه خودتون لینک کنین:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </body>
</html>

CDN چیست؟

CDN به معنی آدرس اینترنتی یک فایل هست؛

به عنوان مثال یک فایل سورس کد نوشته شده و در فضای اینترنت آپلود شده؛ در این صورت به لینک دانلود اون سورس کد CDN گفته میشود

با این تعریف در استفاده از روش cdn(طبق کد گفته شده) بجای استفاده از فایل سورس کد Vue Js از آدرس اینترنتی آن استفاده میکنیم(آدرس CDN همان سورس کد ویو جی اس می باشد)

روش استفاده از فایل

همون طور که میدونین Vue Js بر خلاف بوت استرپ فقط یک فایل به عنوان سورس کد دارد و شما میتونین فایل رو مثل یک فایل جاوا اسکریپت ساده به سند خودتون لینک بکنین و به راحتی از آن استفاده کنین؛

ممکنه براتون سوال باشه که سورس کدش رو از کجا بیاریم؟

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

وارد لینک که بشید برای دانلود سورس کد ویو جی اس با دو گزینه متفاوت روبرو میشین:

نحوه نصب ویو جی اس همون طور که میبینین دو دکمه مختلف برای دانلود سورس vue وجود دارد

اگر سورس موجود در بخش Development Version رو دانلود کنین سورسی رو بهتون میده که مینیمایز نشده و در توسعه پروژتون در زمینه دیباگینگ کمکتون میکنه

ولی سورس کد موجود در بخش Production Version مینیمایز نشده

پیشنهاد میشه سورس مینیمایز نشده رو دانلود کرده و استفاده کنین

علاوه بر این روش، برای به دست آوردن فایل سورس کد ویو جی اس میتونین همون cdn رو که در پاراگراف قبلی توضیح داده شد در url مرورگر خود copy بکنین؛

سورس کدش رو براتون میاره و شما میتونین روی کد ها راست کلیک کرده و توسط گزینه Save As سورس رو سیو کرده و به داکیومنت خودتون لینک بکنین
به شکل زیر:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="js/vue.js"></script>
  </body>
</html>

استفاده از پکیج منیجر

شما برای نصب Vue Js در پروژه خودتون میتونین از پکیج منیجر هایی مثل NPM, Yarn, … استفاده کنین

محبوب ترین و پراستفاده ترین پکیج منیجی در فعل حال پکیج منیجر NPM هست که پکیج های بسیار زیادی دارد

برای استفاده از npm ابتدا باید node js رو روی سیستم خود لینک بکنین

میتونین فایل نصبی node js را از داکیومنتش به ادرس دانلود فایل نصبی node js دانلود کرده و نصب نمایید،

مراحل نصب خیلی راحتی دارد

بعد از نصب node js براحتی میتونین از پکیج منیجر npm استفاده کنین و با یک کامند npm install vue ویو جی اس رو به پروژه خودتون اضافه کرده و به راحتی از آن استفاده کنین(نحوه نصب نود جی اس و استفاده از پکیج منیجر NPM در ویدیوی مقاله توضیح داده شده است)

تفاوت روش cdn و استفاده از فایل

همون طور که گفته شد cdn آدرس اینترنتی همان فایل سورس کد هست که داخل فضای اینترنت آپلود شده؛

بنابراین برای دانلود آن حتما باید به اینترنت وصل باشیمم و هرچقد اینترنتمون خوب باشه همونقدر زود دانلود میشه؛

اگر شما داخل سایتتون از cdn استفاده کنین و اینترنت یکی از کاربرهاتون ضعیف باشه با مشکل مواجه میشه؛

ضمنا، اگر شما از cdn استفاده بکنین و بعد ها لینک cdm فیلتر بشه کاربرهاتون باید برای ورود به سایتتون فیلترشکنشون رو روشن کرده باشن تا فایل Vue Js براشون دانلود بشه!!

ولی اگر از فایل سورس کد ویو جی اس استفاده بکنین هر اتفاقی هم که بیفته شما مطمئن هستین که فایل مورد نیاز در هاست شما موجود است
پس نتیجه میگیریم که همیشه سعی کنین از فایل استفاده کنین.