Структура каталогов Vue3
В предыдущей главе мы использовали npm для установки проекта (Vue-cli и Vite). Мы открыли каталог в IDE (Vscode, Atom и т. д.), и структура выглядит следующим образом:
Инструмент командной строки vue-cli (example-vue3-test):
Vite（example-vue3-test2）
Стандартный проект Vue 3 обычно можно разделить на три слоя:
- Корневой каталог проекта:Инструменты сборки и конфигурация проекта
- каталог public:Статические ресурсы, не участвующие в сборке
- каталог src:Почти весь бизнес-код находится здесь; повседневная разработка в основном ведётся в этом каталоге.
Типичная структура проекта Vue:
vue-project/ ├── public/ # 静态资源，直接复制到构建输出目录 │ └── favicon.ico # 网站图标 ├── src/ │ ├── assets/ # 静态资源（如图片、字体、CSS） │ │ └── logo.png │ ├── components/ # 可复用的通用组件 │ │ └── CommonHeader.vue │ ├── composables/ # 可复用的 Composition API 逻辑（可选） │ │ └── useFetch.js │ ├── router/ # 路由配置 │ │ └── index.js │ ├── stores/ # Pinia 状态管理（或 store/ 用于 Vuex） │ │ └── index.js │ ├── utils/ # 工具函数（如请求封装、格式化） │ │ └── request.js │ ├── views/ # 页面级组件（对应路由页面） │ │ ├── HomeView.vue │ │ └── AboutView.vue │ ├── App.vue # 根组件 │ └── main.js # 入口文件（创建 Vue 应用） ├── index.html # HTML 入口模板 ├── vite.config.js # Vite 配置文件 ├── package.json # 项目依赖与脚本 ├── .gitignore # Git 忽略文件 ├── .env # 环境变量（开发） ├── .env.production # 环境变量（生产） └── README.md # 项目说明
Пояснение к каталогу
| Путь | Описание |
|---|---|
| public/ | Хранит статические ресурсы, которые не будут обрабатываться инструментом сборки; они напрямую копируются в каталог dist, обычно используются для favicon, robots.txt и т. д. |
| public/favicon.ico | Значок веб-сайта (favicon) |
| src/ | Основной каталог для исходного кода проекта; весь код разработки размещается здесь |
| src/assets/ | Содержит статические ресурсы, такие как изображения, шрифты и глобальный CSS; они будут обработаны Vite (поддерживает import) |
| src/components/ | Содержит переиспользуемые общие компоненты (например, кнопки, карточки, компоненты макета) |
| src/composables/ | Содержит переиспользуемые логические функции Composition API (рекомендуемый Vue 3 подход к повторному использованию кода) |
| src/router/ | Каталог конфигурации Vue Router, обычно содержит index.js для определения таблицы маршрутов |
| src/stores/ | Каталог управления состоянием Pinia (официально рекомендуемый Vue 3), содержит каждый модуль хранилища |
| src/utils/ | Содержит служебные функции, такие как обёртки axios, форматирование времени, константы и т. д. |
| src/views/ | Хранит компоненты уровня страниц, обычно соответствующие маршрутам один к одному (страницы маршрутов) |
| src/App.vue | Корневой компонент приложения Vue, содержащий<router-view>и другие точки рендеринга входа |
| src/main.js | Входной файл проекта, создаёт экземпляр приложения Vue, подключает плагины (router, pinia и т. д.) и монтирует в #app |
| index.html | Файл HTML-шаблона, содержащий<div></div>точка монтирования |
| vite.config.js | Файл конфигурации инструмента сборки Vite; можно настраивать плагины, псевдонимы, прокси и т. д. |
| package.json | Зависимости проекта, команды скриптов (например, dev, build, preview) |
| .gitignore | Файл игнорирования Git; обычно игнорирует node_modules, dist, .env и т. д. |
| .env / .env.production | Файл переменных окружения, используемый для настройки API-адресов и т. д. для разных окружений (переменные Vite, начинающиеся с VITE_) |
| README.md | Документация проекта |
По мере роста проекта вам также может понадобиться добавить эти папки:
- src/layouts/: Различные макеты страниц (например, AdminLayout.vue, GuestLayout.vue).
- src/plugins/: Пользовательские плагины Vue (например, автоматическая глобальная регистрация компонентов).
- src/directives/: Пользовательские директивы (например, v-loading).
- src/types/: Глобальные объявления типов TypeScript.
- tests/илиtests/: Модульные/E2E-тесты (Vitest + Vue Test Utils).
- src/api/: Отдельные модули вызова API-интерфейсов (более детальные, чем utils/request).
Далее рассмотрим example-vue3-test2 в качестве примера, откроем файл src/APP.vue в каталоге, код выглядит следующим образом (пояснения приведены в комментариях):
Код файла src/APP.vue
<!-- Шаблон отображения -->
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Код Vue -->
<script>
/* Импорт компонента HelloWorld из src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3.0 + Vite" />
</template>
<!-- Код Vue -->
<script>
/* Импорт компонента HelloWorld из src/components/HelloWorld.vue */
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Далее мы можем попробовать изменить инициализированный проект и заменить src/APP.vue на следующий код:
Код файла src/APP.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Добро пожаловать в Example Tutorial!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Добро пожаловать в Example Tutorial!" />
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
Откройте страницуhttp://localhost:3000/, обычно она автоматически обновляется после изменения, и отображаемый результат выглядит так:
