Структура проекта

При организации проекта с использованием Element Plus ключевое значение имеет правильно выстроенная структура каталогов и компонентов, что позволяет поддерживать код в чистоте и масштабируемости.

1. Основные каталоги проекта

Типичная структура проекта на Vue 3 с Element Plus может выглядеть следующим образом:

src/
├─ assets/          # Статические файлы (картинки, шрифты, стили)
├─ components/      # Переиспользуемые компоненты
├─ views/           # Страницы приложения
├─ router/          # Настройка маршрутизации
├─ store/           # Vuex или Pinia для управления состоянием
├─ plugins/         # Подключение сторонних библиотек (например, Element Plus)
├─ styles/          # Глобальные стили и темы
└─ App.vue          # Корневой компонент
└─ main.js          # Точка входа приложения

Акцент: каталог plugins важен для подключения Element Plus с кастомной конфигурацией, что позволяет централизованно управлять компонентами и настройками библиотеки.

2. Подключение Element Plus

В файле main.js подключение библиотеки выполняется следующим образом:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// Подключение Element Plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(ElementPlus)
app.mount('#app')

Для проектов с большим количеством компонентов часто создают отдельный файл plugins/element-plus.js, где можно настроить локализацию, глобальные компоненты и темы:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import locale from 'element-plus/lib/locale/lang/ru'

export default (app) => {
  app.use(ElementPlus, { locale })
}

3. Компоненты и их организация

Element Plus предоставляет огромное количество готовых UI-компонентов. Важно разделять:

  • Глобальные компоненты – те, которые используются на многих страницах (BaseButton.vue, BaseTable.vue).
  • Локальные компоненты – специфичные для конкретной страницы (UserForm.vue, ProductCard.vue).

Пример структуры components/:

components/
├─ base/
│  ├─ BaseButton.vue
│  ├─ BaseInput.vue
├─ layout/
│  ├─ Header.vue
│  ├─ Sidebar.vue
├─ widgets/
│  ├─ DataTable.vue
│  ├─ ChartCard.vue

Совет: компоненты из base/ обычно регистрируются глобально, чтобы не импортировать их каждый раз вручную.

4. Страницы и роутинг

Каталог views/ содержит основные страницы приложения. Пример структуры:

views/
├─ Home.vue
├─ Users.vue
├─ Products.vue
└─ Settings.vue

Маршрутизация в router/index.js:

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Users from '../views/Users.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/users', name: 'Users', component: Users },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Особенность: для больших проектов часто применяют ленивую загрузку компонентов с import() для оптимизации размера сборки.

5. Глобальные стили и темы

Каталог styles/ используется для хранения переменных, миксинов и глобальных настроек:

styles/
├─ variables.scss
├─ mixins.scss
├─ main.scss

Подключение глобальных стилей:

import './styles/main.scss'

Для Element Plus можно изменять тему через SCSS-переменные:

$--color-primary: #409EFF;
$--font-size-base: 14px;
@import 'element-plus/theme-chalk/src/index';

6. Управление состоянием

Для крупных приложений рекомендуется использовать Pinia или Vuex:

store/
├─ index.js        # Инициализация хранилища
├─ modules/
│  ├─ user.js
│  ├─ products.js

Пример модуля:

export const userStore = {
  state: () => ({ users: [] }),
  actions: {
    async fetchUsers() {
      this.users = await fetch('/api/users').then(res => res.json())
    }
  }
}

7. Подключение дополнительных плагинов

Element Plus поддерживает плагины, такие как ElMessage, ElNotification, ElLoading, которые удобно подключать через plugins/:

import { ElMessage, ElNotification } from 'element-plus'

app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$notify = ElNotification

Это позволяет использовать уведомления и сообщения во всех компонентах без повторного импорта.

8. Советы по масштабируемости

  • Компоненты разделять по функциональному принципу (base, widgets, layout).
  • Использовать ленивую загрузку страниц и компонентов.
  • Настраивать глобальные SCSS-переменные для единого управления стилем.
  • Хранилище состояния разделять на модули для логической организации.
  • Плагины и сторонние библиотеки подключать централизованно через каталог plugins.

Структура проекта с такими принципами обеспечивает удобство поддержки и позволяет масштабировать приложение с Element Plus без хаоса в коде.

Оглавление