Как подключить и использовать сторонние библиотеки (например, Axios, Lodash) в Vue-проекте?
В Vue-проекте подключение сторонних библиотек (например, Axios для HTTP-запросов или Lodash для работы с данными) происходит стандартными методами, принятыми в JavaScript-среде. Обычно это делается с помощью менеджера пакетов npm или yarn, после чего библиотека импортируется в нужные файлы проекта и, при необходимости, интегрируется глобально через app.config.globalProperties.
Установка библиотеки
С помощью npm:
npm install axios lodash
С помощью yarn:
yarn add axios lodash
После этого зависимости появятся в package.json и будут установлены в node_modules.
Импорт и использование в компонентах
Axios
Axios — это HTTP-клиент для выполнения запросов к серверу.
Импорт локально в компонент:
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
const users = ref(\[\]);
onMounted(async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
users.value = response.data;
});
</script>
Импорт через обычный setup():
import axios from 'axios';
import { ref, onMounted } from 'vue';
export default {
setup() {
const posts = ref(\[\]);
onMounted(async () => {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts');
posts.value = data;
});
return { posts };
}
}
Lodash
Lodash — это утилитарная библиотека для работы с массивами, объектами, строками и т. д.
Импорт отдельных функций:
import { debounce, cloneDeep } from 'lodash';
const debouncedFn = debounce(() => {
console.log('Вызов с задержкой');
}, 300);
const copy = cloneDeep({ name: 'Test' });
Импорт всей библиотеки (не рекомендуется из-за размера):
import _ from 'lodash';
\_.isEmpty(\[\]);
\_.uniq(\[1, 1, 2, 3\]);
Глобальная интеграция библиотеки во Vue-приложение
Если вы хотите сделать библиотеку доступной во всех компонентах без явного импорта, можно добавить её в globalProperties во время инициализации приложения.
Пример: регистрация Axios глобально
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.mount('#app');
Теперь во всех компонентах можно использовать:
this.$axios.get('/api/data');
В <script setup> доступ к this невозможен. В этом случае нужно использовать inject или просто использовать локальный импорт.
Пример: регистрация Lodash глобально
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import _ from 'lodash';
const app = createApp(App);
app.config.globalProperties.$_ = \_;
app.mount('#app');
В обычных компонентах:
this.$\_.uniq(\[1, 2, 2, 3\]);
Использование через provide/inject
Если вы используете Composition API и <script setup>, можно подключать библиотеки через provide и inject.
main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';
const app = createApp(App);
app.provide('axios', axios);
app.mount('#app');
В компоненте
<script setup>
import { inject, onMounted } from 'vue';
const axios = inject('axios');
onMounted(async () => {
const res = await axios.get('/api/example');
console.log(res.data);
});
</script>
Создание плагина для сторонней библиотеки
Если сторонняя библиотека требует специфической инициализации, можно создать Vue-плагин.
// plugins/axios.js
import axios from 'axios';
export default {
install(app) {
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
app.config.globalProperties.$axios = instance;
app.provide('axios', instance);
}
};
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import AxiosPlugin from './plugins/axios';
const app = createApp(App);
app.use(AxisPlugin);
app.mount('#app');
Работа с типами в TypeScript
Если проект на TypeScript, для некоторых библиотек нужно установить типы отдельно.
npm install --save-dev @types/lodash
TypeScript сам подтянет типы при использовании:
import { uniq } from 'lodash';
const result: number\[\] = uniq(\[1, 2, 2, 3\]); // Тип будет определён автоматически
Использование в Nuxt (если используется)
В Nuxt 3 сторонние библиотеки можно подключать через plugins/.
Пример для Axios:
// plugins/axios.ts
import axios from 'axios';
export default defineNuxtPlugin(() => {
const instance = axios.create({
baseURL: 'https://api.example.com'
});
return {
provide: {
axios: instance
}
};
});
Затем использовать так:
const { $axios } = useNuxtApp();