Структура фронтенда

Структура проекта (папок и файлов) фронтенда (на 18.01.2020 г.).

Основная информация

Фронтент Умной социальной сети Техноком имеет базовую структуру как проект Nuxt плюс наши доработки и наша структура страниц, компонентов и т.д.

Посмотреть описание структуры директорий Nuxt можно на официальном сайте на русском языке https://ru.nuxtjs.org/guide/directory-structure/

Описание структуры папок и файлов

Ниже даётся постепенно обновляемое описание структуры папок и файлов проекта. При внесении изменений просьба менять дату в начале этого документа, если дата уже другая. На текущий момент будет получаться структура довольно сборная из разных веток, потом будет указываться только то, что уже влито в ветку master - без дополнительных пояснений и при необходимости то, что находится в ветке develop с указанием этого.

Но сейчас, как уже было замечено, будет получаться структура, которая пока частично раскидана по разным веткам, это нужно для того, чтобы люди работающие над функционалом близким по месту использования, использовали похожую структуру. Например, чтобы функционал связанный с Сообществами, находился в папке Komunumo, а не в разных папках, типа Komunumo, Kom, Komun и так далее.

.nuxt - системная папка, в которой размещаются файлы создаваемые фреймворком Nuxt.

assets - папка содержит не скомпилированные файлы с исходным кодом, такие как LESS, SASS или JavaScript.

components (layouts > pages > componets)  - папка содержит компоненты Vue.js для приложения. Nuxt.js не перегружает метод data у этих компонент (речь об асинхронной загрузке data).

layouts - папка содержит шаблоны приложения ( самые высокоуровневые layouts > pages > componets).

Внимание

Эту папку переименовать нельзя

middleware - папка содержит промежуточное ПО вашего приложения. Промежуточное программное обеспечение позволяет вам определять пользовательские функции, которые могут быть запущены перед отображением страницы или группы страниц.(позволяют создавать функции перед рендеренгом страниц, защита роутов от не авторизованных пользователей ).

modules -папка где хранятся разные модули проекта.

node_modules - папка куда загружаются все необходимые библиотеки которые подключены к проекту. В репозиторий эта папка не заливается потому что там этих библиотек может быть вагон и размер на гигабайт, у нас в проекте поменьше, но всё рано, поэтому при скачавании проекта, как нашего, так и других на Vue / Vuex / Nuxt и других использующих пакетный менджер Node.js который называется NPM сначала нужно эти все зависимости поставить, для чего в файле проекта выполняется команда npm i или npm install?

pages - папка (layouts > pages > componets) содержит представления (views) и маршруты (routes). Фреймворк считывает все файлы .vue внутри папки и создает маршрутизатор для вашего приложения.

plugins - папка содержит JavaScript-плагины, запускаемые перед созданием экземпляра корневого приложения Vue.js (запускаются перед рендерингом vue js приложения для конфигурации модулей, регистрация глобальных сущностей, фильтров директов и т.д.)

static - папка содержит статические файлы. Каждый файл в этой папке доступен через /. Пример: /static/robots.txt будет доступен как /robots.txt

Внимание

Эту папку переименовать нельзя.

.store - папка может содержать файлы Vuex хранилища. Vuex хранилище является опциональным в Nuxt.js. Создайте файл index.js в этой папке, и Vuex хранилище активируется фреймворком автоматически.

Внимание

Эту папку переименовать нельзя.

.eslintrc - файл конфигурации автоформатора кода ESLint.

.gitignore - игнорируемые системой контроля версий GIT файлы.

nuxt.config.js - файл, содержит пользовательскую конфигурацию Nuxt.js.

Внимание

Этот файл переименовывать нельзя.

package-lock.json - файл, в нём фиксируются точные версии используемых библиотек, если более новая библиотека сильно поменяла свой функционал, структуру и т.д., то проект может не работать с ней, для этого используется как раз этот файл чтобы жёстко зафиксировать какие версии обязательно нужно использовать, чтобы не поставились более новые, с которыми не будет работать.

Внимание

Этот файл переименовывать нельзя.

package.json - файл содержит список зависимостей и команды(скрипты) для вашего приложения.

Внимание

Этот файл переименовывать нельзя.

README.md - файл описания

urls.js - файл

1. Если нужно создать страницу со сложным адресом, типа /idk13, то в корне проекта есть urls.js, туда надо добавлять regexp для страницы, совсем как в django. Это сделано потому, что в nuxt есть только один способ объявить страницу с переменной часть - это страница _id.vue, т.е. _id подменяется на что-то, а поскольку этих что-то у нас много, то я сделал через эту страницу парсинг, чтобы можно было описать и /idk{id} и /idu{id} и т.п.
2. Вообще страницы с динамическим частями нужно прописать в файле urls.js в корне проекта

utils.js - файл для хранения разработанных утилит