نصب بوتسترپ 5 در ویو جی اس vue.js

نویسنده : توفیق حمزه ئی
تاریخ : 1399/12/06
نصب بوتسترپ 5 در ویو جی اس vue.js

در این مقاله به این میپردازیم به چه شکلی میشه در ویو(vue.js) بیایم و از bootstrap 5 استفاده کنیم. بوتسترپ که یک فریمورک css هستش و برای استایل دهی ازش استفاده میکنیم در نسخه جدیدش از jquery استفاده نمیکنه و به جاش از جاوااسکریپت خودش استفاده میکنه به همین دلیل کارمون خیلی راحت هست برای تنظیم این فریمورک و به  همین صورت بهینه تر هم خواهد بود چون میتونیم از vDOM مربوط به ویو استفاده کنیم. در این مقاله اول به صورت خیلی ساده میایم و یک اپلیکیشن ساده ویو رو با vite ایجاد میکنیم و ستایل های بوتسترپ رو لود کرده و در نهایت از مدال استفاده خواهیم کرد.

نصب ویو با vitejs

در مرحله اول باید یک اپلیکیشن ویو رو نصب کنیم که ما میایم و از vitejs استفاده خواهیم کرد. و شما میتونین از vue-cli استفاده کنین. کافیه دستور زیر رو بزنید تا بعد نام گذاری پروژه و انتخاب vue به عنوان ساختار اپلیکیشن یه ساختار اولیه رو داشته باشید.

npm init @vitejs/app

برای کسب اطلاعات بیشتر بر روی این لینک کلیک کنید.

نصب بوتسترپ

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

npm install bootstrap@next
npm install -D sass

حالا بعد نصب شدن اینا کافیه در فایل main.js بیایم و بوتسترپ و هم لود کنیم چون الان مثلا در اپلیکیشن بیایم و یه دکمه رو با کلاس های btn btn-primary سعی کنیم استایل دهی کنیم هیچ اتفاقی نمیوفته. کافیه این لاین رو به فایل main.js اضافه کنیم.

import 'bootstrap/scss/bootstrap.scss'

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

<button class="btn btn-primary">test</button>

استفاده از مدال بوتسترپ

همین جوری که گفتم بوتسترپ علاوه بر اینکه استایل سی اس اس داره از جاوااسکریپتم استفاده میکنه. و مدال هم یکی از کامپوننت های بوتسترپه که از جاوااسکریپت استفاده میکنه. برای اینکار با بیسیک ترین مثال خود داکیومنت بوتسترپ شروع میکنیم. کافیه کدای زیر رو مورد استفاده قرار بدین در هر کامپوننتی باشه فرق نمیکنه(مثلا App.vue):

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

import { Modal } from 'bootstrap'

اما حالا اررور داریم که میگه باید پکیج @popperjs/core رو به شکل زیر نصبش کنیم.

npm i @popperjs/core

این پکیج رو خود بوتسترپ بهش نیاز داره و بعد نصب این پکیج خواهیم دید که مدال کار میکنه. ایول:)) اما ما داریم از data-bs استفاده میکنیم و هنوز  از خود دام مجازی یا vDOM استفاده نکردیم که در پایین توضیح خواهیم داد.

استفاده از دام مجازی ویو

ویو از دام مجازی استفاده میکنه که در نتیجه اون بیشتر با دیتاها سروکار داریم اما گاهی وقتی لازمه با خود المنت کار کنیم مثلا یک اینپوت رو اگه خواستیم فوکوس کنیم باید بیایم از ref ها استفاده کنیم. اینجا هم به همین صورته. حالا ما دو روش داریم برای استفاده از جاوااسکریپت بوتسترپ یکی data-bs یکی هم خود کلاس های بوتسترپ همی Modal که الان لودش کردیم. در مستندات بوتسترپ گفته به این شکلی هم میشه از مدال استفاده کرد.

var myModal = new Modal(document.getElementById('exampleModal'), options)

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

<template>

  <button type="button" class="btn btn-primary" @click="modal.show()">

    باز کردن مدال

  </button>

 

  <!-- Modal -->

  <div class="modal fade" ref="exampleModal" tabindex="-1" aria-hidden="true">

    <div class="modal-dialog">

      <div class="modal-content">

        <div class="modal-header">

          <h5 class="modal-title" id="exampleModalLabel">عنوان مدال</h5>

          <button type="button" class="btn-close" @click="modal.hide()"></button>

        </div>

        <div class="modal-body">

          ...

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" @click="modal.hide()">بستن</button>

          <button type="button" class="btn btn-primary">ذخیره تغییرات</button>

        </div>

      </div>

    </div>

  </div>

</template>

 

<script>

import { Modal } from 'bootstrap'

 

export default {

  name: "App",

 

  data: () => ({

    modal: null

  }),

 

  mounted() {

    this.modal = new Modal(this.$refs.exampleModal)

  }

};

</script>

اولا اومدیم و یه مدال جدید و با استفاده از ref ها به این شکلی this.modal = new Modal(this.$refs.exampleModal) در دیتای مربوط ذخیره کردیم و حالا که این دیتا رو داریم به راحتی میتونی در دکمه مربوطه بیایم و به شکل modal.show() اون رو نمایش بدیم یعنی:

<button type="button" class="btn btn-primary" @click="modal.show()">

  باز کردن مدال

</button>

مخفی کردنش هم به همین صورت به راحتی با modal.hide() میتونی این کارو انجام بدیم.

جمع بندی

در این مقاله اومدیم بعد نصب پروژه vitejs بوتسترپ رو هم نصبش کردیم و دیدیم به چه شکلی میشه از دام مجازی ویو هم استفاده کرد. این نکات رو تماما در دوره آموزش ویو ورژن 3 سایت webamooz.net پوشش دادم و امیدوارم این مقاله کوتاه براتون مفید بوده باشه :))

شما برای ارسال نظر باید اول وارد سایت شوید