0Pricing
Vue Academy · Урок

Структура сгенерированного проекта

Познакомьтесь с файлами и папками, которые создаёт проект Vue

«Структура сгенерированного проекта» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Обзор проекта

Созданный с помощью шаблона проект Vue имеет предсказуемую структуру папок.

  • src/ — исходный код приложения
  • public/ — статические ресурсы, которые обслуживаются без изменений
  • package.json — зависимости и скрипты
  • index.html — страница, в которую Vue монтирует приложение

Понимание расположения файлов помогает быстро ориентироваться в проекте.

Папка src

В папке src/ находится всё, что вы пишете сами.

src/
  assets/        # images, fonts, global CSS
  components/    # reusable .vue components
  App.vue        # root component
  main.js        # application entry point

Точка входа main.js

В файле main.js запускается приложение. Он создаёт приложение и монтирует его.

import { createApp } from "vue"
import App from "./App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

Корневой компонент App.vue

App.vue — корневой компонент. Все остальные компоненты находятся внутри него.

<template>
  <header>
    <h1>My App</h1>
  </header>
  <main>
    <HelloWorld msg="Welcome" />
  </main>
</template>

<script setup>
import HelloWorld from "./components/HelloWorld.vue"
</script>

Папка components

В папке components/ находятся повторно используемые однофайловые компоненты.

  • Каждый файл .vue представляет собой один компонент
  • Импортируйте компоненты там, где они нужны
  • По мере роста приложения распределяйте их по вложенным папкам

Папка public

В папке public/ находятся статические файлы, которые без изменений копируются в результат сборки.

  • Файлы из этой папки сборщик не обрабатывает
  • Используйте её для значков сайта, robots.txt или неизменяемых ресурсов
  • Ссылайтесь на них с помощью абсолютных путей от корня

Точка монтирования index.html

index.html — единственная HTML-страница. Она содержит целевой элемент для монтирования.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>My App</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

package.json

Файл package.json описывает проект и его зависимости.

{
  "name": "my-vue-app",
  "version": "0.0.0",
  "dependencies": {
    "vue": "^3.4.0"
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

Скрипты package.json

Раздел scripts определяет команды, которые вы запускаете с помощью npm run.

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

assets и public

Есть два способа хранить статические файлы:

  • src/assets/ — обрабатывается сборщиком, получает хеш для кэширования и импортируется в коде
  • public/ — копируется без изменений и используется по фиксированному пути

Используйте assets для ресурсов, которые импортируются в коде, а public — для ресурсов, URL которых должен оставаться неизменным.

Как всё связано

Последовательность действий при загрузке приложения:

  • Браузер загружает index.html
  • Он запускает main.js через тег скрипта модуля
  • main.js монтирует App.vue в #app
  • App.vue отображает дочерние компоненты

Быстрая проверка

Проверьте свои знания о структуре проекта.

Итоги: структура проекта

Вы изучили структуру проекта Vue:

  • src/ содержит ваш код
  • main.js запускает приложение
  • App.vue — корневой компонент
  • components/ содержит повторно используемые части
  • public/ и index.html используются для статического содержимого
  • package.json определяет зависимости и скрипты

Далее вы настроите CLI и добавите плагины.

Часто задаваемые вопросы

Урок «Структура сгенерированного проекта» бесплатный?

Да — полный текст урока «Структура сгенерированного проекта» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Структура сгенерированного проекта»?

Познакомьтесь с файлами и папками, которые создаёт проект Vue Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Структура сгенерированного проекта»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Установка Vue CLI
  2. Структура сгенерированного проекта
  3. Настройка CLI и плагины
← Назад к Vue Academy