Vue + Vite структура папок
https://www.reddit.com/r/ProgrammerHumor/comments/ijd9bz/itsorganized/?rdt=48952_
Вступ
У нашій попередній статті ми згадували, що Vue тепер за замовчуванням використовує Vite як інструмент для побудови фронтенду (building tool), замість старого create-vue. Зазвичай розробники, які вперше використовують фреймворк, можуть бути вражені великою кількістю різних файлів. Спочатку, коли ми переходили від трьох файлів HTML, CSS, JS до десятків файлів, це може виглядати досить складно. Мета цієї статті — пояснити, що робить кожен з файлів, і допомогти вам орієнтуватися в налаштуваннях і конфігураціях.
Опис
.vscode
- extensions.json
Цей файл використовується для того, щоб запропонувати інші розробники проекти для використання певних розширень у їхній роботі.
- settings.json
Файл для налаштувань, які застосовуються для конкретного проекту, наприклад, стиль відступів, налаштування мови та інші.
package.json
Цей файл містить список залежностей і команд, які потрібні для проекту. Він є чимось на зразок інструкції для npm.
- name: назва проекту
- version: версія проекту (ваша або вже визначена іншими розробниками)
- private: позначає, що проект приватний і не може бути опублікований в публічних пакетних менеджерах.
- type: “module” означає, що використовуються ECMAScript модулі замість CommonJS, тобто використовуються імпорти та експорти, а не традиційні require() і module.exports.
- scripts: тут зберігаються команди для запуску, наприклад,
npm run dev, який насправді запускає команду vite. - dependencies: тут вказані необхідні залежності для запуску проекту.
- devDependencies: залежності, які не є обов'язковими для роботи проекту, але можуть бути корисними для розробки (наприклад, eslint).
node_modules
Ця папка може здатися великою, і на початку її не буде видно, але вона дуже важлива, оскільки без неї проект не запуститься.
vite.config.js
Цей файл конфігурації використовується для налаштування процесу побудови за допомогою vite. Особливо варто звернути увагу на:
- resolve → alias → '@' — цей псевдонім шляху дозволяє використовувати
@/…замість довгих відносних шляхів, що покращує читабельність і зручність роботи з імпортами.
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
src
Основна частина роботи над проектом відбувається тут. Ось кілька важливих папок:
- assets — для статичних ресурсів, таких як зображення, шрифти, аудіо тощо.
- component — компоненти, які використовуються для побудови інтерфейсу користувача. Це як будівельні блоки, які ви можете використовувати для створення сторінок.
- router & stores — налаштування для маршрутизації (vue-router) та управління станом (pinia), детальніше можна розглянути в подальших статтях.
- views — це головні "будівлі" вашого проекту, наприклад, головна сторінка.
- main.js — використовується для ініціалізації Vue 3, підключення глобальних пакетів (наприклад, Pinia чи router), а також для монтування додатка на HTML.
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
index.html
Цей файл містить HTML-шаблон для вашого Vue-додатка. Ініціалізація вашого додатка та його підключення до HTML відбувається через main.js.
public
Файли в цій папці не компілюються та не упаковуються, тому не використовуйте їх для ресурсів, що мають бути доступні в бандлі. Зазвичай сюди поміщають файли, як-от логотипи для вебсайту.
Підсумок
Спочатку може бути важко розібратися в структурі проекту, коли з'являється багато нових файлів. Але з часом це стає зрозумілим, і структура стає дуже корисною для організації великого проекту. Сподіваюся, ця стаття допомогла зрозуміти основи організації проекту на Vue з Vite.
Отже, ця стаття повинна дати вам базове розуміння. Вам достатньо просто відкрити папку views і почати редагувати файли, додавати текст, і з часом ви зрозумієте, де знаходяться ці компоненти. На мою думку, більш важливим є розуміння того, куди ці компоненти будуть зібрані в кінцевому підсумку. Це дозволить створити більш чітку структуру проекту.
Перекладено з: 想成為滿級新手[Vue]-2