نصب و استفاده از کتابخانه‌ها در Vue.js

در Vue.js می‌توان از کتابخانه‌های مختلف برای افزودن قابلیت‌های بیشتر مانند UI کامپوننت‌ها، مدیریت وضعیت، درخواست‌های HTTP و موارد دیگر استفاده کرد. در اینجا نحوه نصب و استفاده از کتابخانه‌ها را بررسی می‌کنیم.

1. نصب کتابخانه‌ها در Vue.js

نصب از طریق NPM یا Yarn

روش استاندارد برای نصب کتابخانه‌ها، استفاده از NPM (Node Package Manager) یا Yarn است.

npm install <package-name>

# یا

yarn add <package-name>

نصب از طریق CDN (بدون نیاز به NPM)

اگر نمی‌خواهید NPM را استفاده کنید، می‌توانید برخی کتابخانه‌ها را از طریق CDN در index.html بارگذاری کنید:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

اما در این روش، Vue قابلیت‌های بومی مثل import را برای آن کتابخانه نخواهد داشت.

2. استفاده از کتابخانه‌های رایج در Vue.js

۲.۱ استفاده از Axios برای درخواست‌های HTTP

Axios برای ارسال و دریافت داده‌ها از API‌ها استفاده می‌شود.

نصب Axios:

npm install axios

استفاده در یک کامپوننت Vue:

<template>

  <div>

    <button @click="fetchData">دریافت داده</button>

    <p>{{ data }}</p>

  </div>

</template>

<script>

import axios from "axios";

export default {

  data() {

    return { data: null };

  },

  methods: {

    async fetchData() {

      try {

        const response = await axios.get("https://jsonplaceholder.typicode.com/posts/1");

        this.data = response.data;

      } catch (error) {

        console.error("خطا در دریافت داده", error);

      }

    }

  }

};

</script>

۲.۲ استفاده از Vue Router برای مدیریت مسیرها

نصب Vue Router:

npm install vue-router@4

ایجاد فایل router.js و تعریف مسیرها:

import { createRouter, createWebHistory } from "vue-router";

import Home from "./views/Home.vue";

import About from "./views/About.vue";

const routes = [

  { path: "/", component: Home },

  { path: "/about", component: About }

];

const router = createRouter({

  history: createWebHistory(),

  routes

});

export default router;

افزودن به main.js:

import { createApp } from "vue";

import App from "./App.vue";

import router from "./router";

const app = createApp(App);

app.use(router);

app.mount("#app");

۲.۳ استفاده از Vuex برای مدیریت وضعیت

نصب Vuex:

npm install vuex@next

ایجاد store.js:

import { createStore } from "vuex";

const store = createStore({

  state: {

    count: 0

  },

  mutations: {

    increment(state) {

      state.count++;

    }

  }

});

export default store;

افزودن به main.js:

import store from "./store";

app.use(store);

۲.۴ استفاده از کتابخانه‌های UI مانند Vuetify

نصب Vuetify (یک فریمورک زیباسازی UI بر پایه Material Design)

npm install vuetify

افزودن به main.js:

import { createApp } from "vue";

import App from "./App.vue";

import { createVuetify } from "vuetify";

import "vuetify/styles";

const vuetify = createVuetify();

const app = createApp(App);

app.use(vuetify);

app.mount("#app");

استفاده از کامپوننت‌های Vuetify در App.vue:

<template>

  <v-container>

    <v-btn color="primary">دکمه Vuetify</v-btn>

  </v-container>

</template>

3. حذف یک کتابخانه

اگر بخواهید یک کتابخانه را حذف کنید، از این دستور استفاده کنید:

npm uninstall <package-name>

# یا

yarn remove <package-name>

جمع‌بندی

✔ کتابخانه‌ها را می‌توان از طریق NPM یا CDN نصب کرد.
✔ Axios برای درخواست‌های HTTP، Vue Router برای مسیریابی، Vuex برای مدیریت وضعیت و Vuetify برای UI استفاده می‌شود.
✔ کتابخانه‌ها را باید در main.js مقداردهی و در کامپوننت‌ها استفاده کرد.