Привет, подписчики Vue.js.
Когда я пытался узнать что-то новое, я заметил, что не знаю, как структурировать свой проект. Как лучше всего это делать? Куда мне класть файлы, чтобы не запутать проект?
Эта история в основном посвящена разработчикам, которые только начали изучать Vue.js, но ветеранам Vue.js может быть интересно по-новому взглянуть. в эту тему.

Начнем с новой установки нового проекта с помощью Vue CLI.

vue create my-awesome-app

После установки вы можете увидеть следующую структуру папок (она также зависит от параметров, выбранных в Vue CLI. Для этого проекта я выбрал все возможные варианты):

--public
----img
------icons
----favicon.ico
----index.html
----robots.txt
--src
----assets
------logo.png
----components
------HelloWorld.vue
----router
------index.ts
----store
------index.ts
----views
------About.vue
------Home.vue
----App.vue
----main.ts
----registerServiceWorkers.ts
----shims-vue.d.ts
--tests
----e2e
----unit
--.browserslistrc
--.eslintrc.js
--.gitignore
--babel.config.js
--cypress.json
--jest.config.js
--package.json
--package-lock.json
--README.md
--tsconfig.json

Это довольно стандартная структура, но она не подходит для средних и крупных приложений. Мы собираемся сконцентрироваться на srcfolder, но прежде чем продолжить, давайте взглянем на другие папки.

public папка используется, если вам нужно:

  • файл со специальным именем в выводе сборки
  • динамическая ссылка для изображений
  • если библиотека несовместима с Webpack

Более подробную информацию о том, как пользоваться общей папкой, вы можете найти здесь.

tests/e2e для сквозных испытаний.

tests/unit для модульных тестов.

Структура исходной папки

Как приступим к структурированию нашего нового проекта и src папки. Вот структура, которую я хотел бы представить:

src
--assets
--common
--layouts
--middlewares
--modules
--plugins
--router
--services
--static
--store
--views

Мы собираемся пройтись по всем папкам одну за другой и понять, зачем нам это нужно.

Ресурсы

В этом каталоге мы собираемся хранить все файлы ресурсов. Здесь мы хотим сохранить шрифты, значки, изображения, стили и т. Д.

Общий

Эта папка используется для сохранения общих файлов. Обычно его можно разделить на несколько внутренних папок: components mixins directives и т. Д. Или на отдельные файлы: functions.ts helpers.ts constants.ts config.ts и другие. Основная причина помещения файла в эту папку - его использование во многих местах. Например: внутри src/common/components вы можете хранить Button.vue - общий компонент, используемый во всем приложении. В helpers.ts вы можете написать общую функцию, чтобы использовать ее в нескольких местах.

Макеты

Я уже освещал проблему верстки в одной из своих предыдущих статей. Вы можете сохранить макеты своих приложений в этом каталоге. Например: AppLayout.vue.

Промежуточное ПО

Этот каталог тесно работает с vue router. В этой папке вы можете хранить свои средства навигации. Вот краткий пример одного промежуточного программного обеспечения

export default function checkAuth(next, isAuthenticated) {
  if (isAuthenticated) {
    next('/')
  } else {
    next('/login');
  }
}

и используйте его внутри vue-router

import Router from 'vue-router'
import checkAuth from '../middlewares/checkAuth.js'
const isAuthenticated = true
const router = new Router({
  routes: [],
  mode: 'history'
})
router.beforeEach((to, from, next) => {
  checkAuth(next, isAuthenticated)
});

Более подробную информацию о роутере и промежуточном программном обеспечении вы можете найти в этой статье.

Модули

Это ядро ​​нашего приложения. Здесь мы храним все наши модули - логически разделенные части нашего приложения. Я призываю вас внутри каждого модуля создавать:

  • папка внутренних компонентов, в которой вы можете сохранить свои компоненты vue
  • папка tests (я предпочитаю хранить все связанные тесты в модуле)
  • store.ts или каталог магазина, в котором вы храните модуль магазина
  • другие файлы, относящиеся к этому модулю. Это могут быть вспомогательные функции, относящиеся только к модулю.

Например, это пример модуля orders, в котором вы храните все компоненты, связанные с заказами в вашем приложении: список заказов, детали заказа и т. Д. Заказы Модуль vuex store. Дополнительные связанные файлы. Это могло выглядеть так:

src
--modules
----orders
------__tests__
------components
--------OrdersList.vue
--------OrderDetails.vue
------store
--------actions.ts
--------getters.ts
--------mutations.ts
--------state.ts
------helpers.ts
------types.ts

Плагины

В этой папке вы можете создавать и подключать все свои плагины. Вот пример подключения плагина в Vue 2

import MyPlugin from './myPlugin.ts'
Vue.use(MyPlugin, { someOption: true })

В Vue 3 вы подключите свой плагин к main.ts. Но вы все равно можете создавать свои плагины внутри папки плагинов.

Подробнее о плагинах читайте здесь и здесь.

Услуги

Эта папка нужна для хранения ваших сервисов. Например, вы можете создать и сохранить службу подключений API, службу диспетчера localStorage и т. Д.

Подробнее о модуле vue api читайте здесь.

Статический

Обычно эта папка не нужна. Его можно использовать для сохранения фиктивных данных.

Маршрутизатор

Внутри этого каталога вы можете хранить все файлы, относящиеся к vue-router. Это может быть просто index.ts с маршрутизатором и маршрутами в одном месте (в этом случае, вероятно, будет хорошей идеей сохранить этот файл в src корневом каталоге). Я предпочитаю разделять маршрутизатор и маршруты на два разных файла, чтобы избежать беспорядка.

В этой статье вы можете прочитать, как создать автоматический роутер для своего приложения.

Магазин

Это каталог хранилища vuex, в котором вы можете сохранить все файлы, связанные с vuex. Поскольку вы хотите разделить свои модули vuex, в этой папке вы должны хранить корневое состояние, действия, мутации и геттеры и автоматически подключать все модули vuex из каталога modules.

Просмотры

Это вторая по важности папка в нашем приложении. Здесь мы храним все точки входа для маршрутов приложений. Например, в вашем приложении вы можете иметь /home /about /orders маршруты. Соответственно в папке views у вас должно быть Home.vue About.vue Orders.vue.

Вы можете возразить, почему мы должны разделять views и modules, если мы можем хранить их в одном месте? Я вижу несколько плюсов, которые их разделяют:

  • более четкая структура файлов
  • позволяют быстро понять, какие маршруты у вас есть в приложении
  • легко понять, какой файл является корневым на странице и где он начинает работать

Выводы

В этой статье я поделился своим подходом к созданию приложений vue, основанным на моем опыте работы со многими различными приложениями vue. Конечно, это всего лишь предложения, и вы можете использовать их все, частично или не использовать их совсем. Я надеюсь, что эта статья поможет некоторым разработчикам по-новому структурировать свои проекты и дать больше идей.

Если вам интересна эта статья или другие мои статьи, не стесняйтесь подписываться на меня:

github: https://github.com/NovoManu

twitter: https://twitter.com/ManuUstenko

Вот и все.
См. В следующей статье.