Как подключить новый модуль во Vue CLI?

Как подключить новый модуль во Vue CLI

Модули во Vue CLI — это npm пакеты, которые расширяют функциональность приложения. Vue CLI сам по себе работает на основе плагинов/модулей.

Способ 1: Установка npm пакета

Шаг 1: Установить пакет через npm или yarn

npm install axios
# или
yarn add axios

Шаг 2: Импортировать и использовать в компоненте

import axios from 'axios';

export default {
  data() {
    return { users: [] };
  },
  methods: {
    fetchUsers() {
      axios.get('/api/users').then(response => {
        this.users = response.data;
      });
    }
  }
};

Способ 2: Глобальная регистрация модуля (main.js)

Для использования модуля во всех компонентах без импорта:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import axios from 'axios';

const app = createApp(App);

// Глобально регистрируем axios
app.config.globalProperties.$axios = axios;

app.mount('#app');

Использование в компоненте:

export default {
  methods: {
    fetchData() {
      // Обращаемся через this.$axios
      this.$axios.get('/api/data').then(res => {
        this.data = res.data;
      });
    }
  }
};

Способ 3: Использование Vue плагина (Plugin)

Некоторые модули создаются как плагины для Vue:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);

// Подключаем плагин
app.use(ElementPlus);

app.mount('#app');

Теперь можно использовать компоненты из ElementPlus:

<template>
  <el-button type="primary">Нажми меня</el-button>
  <el-input v-model="text" />
</template>

Способ 4: Использование Vue Router

Маршрутизация в приложении:

npm install vue-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');

// router/index.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;

Способ 5: Использование Pinia (State Management)

Управление состоянием приложения:

npm install pinia

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

// stores/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++;
    }
  }
});

// В компоненте
import { useCounterStore } from '@/stores/counter';

export default {
  setup() {
    const store = useCounterStore();
    
    return {
      count: store.count,
      increment: store.increment
    };
  }
};

Способ 6: Подключение CSS фреймворков

Bootstrap:

npm install bootstrap

// main.js
import 'bootstrap/dist/css/bootstrap.css';

Tailwind CSS:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Способ 7: Использование Vue CLI UI

Vue CLI имеет графический интерфейс для управления плагинами:

vue ui

Откроется веб-интерфейс на http://localhost:8000, где можно:

• Просматривать установленные плагины
• Устанавливать новые плагины
• Настраивать параметры

Способ 8: Создание собственного плагина

// plugins/myPlugin.js
export default {
  install(app, options) {
    // Глобальная переменная
    app.config.globalProperties.$appName = 'MyApp';
    
    // Глобальный компонент
    app.component('MyButton', {
      template: '<button>My Button</button>'
    });
    
    // Глобальная функция
    app.config.globalProperties.$formatDate = (date) => {
      return new Intl.DateTimeFormat('ru-RU').format(date);
    };
  }
};

// main.js
import myPlugin from './plugins/myPlugin';
app.use(myPlugin);

Способ 9: Импорт с локального пути

npm install ./path/to/local/module
# или
npm install file:../my-local-package

Способ 10: Разработка и отладка модуля

Использование npm link для локальной разработки:

cd my-module
npm link

cd my-app
npm link my-module

Проверка установленных модулей

# Список всех установленных пакетов
npm list

# Информация об одном пакете
npm info axios

# Версии пакета
npm view axios versions

Обновление модулей

# Обновить конкретный пакет
npm update axios

# Обновить все пакеты
npm update

# Проверить обновления
npm outdated

package.json структура

{
  "name": "my-app",
  "version": "1.0.0",
  "dependencies": {
    "vue": "^3.3.0",
    "axios": "^1.4.0",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.3.0"
  }
}

Частые ошибки

// ❌ Забыли импортировать пакет
const axios = require('axios');
// это работает в Node.js, но не в браузере

// ✅ Используйте import
import axios from 'axios';

// ❌ Неправильная регистрация плагина
app.use('axios', axios);

// ✅ Правильно
app.config.globalProperties.$axios = axios;

Выводы

• Используй npm install для установки пакетов
• Импортируй модули в компонентах через import
• Для глобального использования регистрируй в main.js
• Используй app.use() для плагинов
• Vue CLI UI упрощает управление плагинами
• Всегда проверяй документацию модуля для правильного подключения