Рубрики
Без рубрики

Vue CLI 3 Структура приложения Pull-Stack

Если вы создаете приложение Full-Stack с Vue, вы все равно можете нужны преимущества Vue CLI 3. Но как вы интегрируете сервер узла в CLI Scaffold?

Автор оригинала: Anthony Gore.

Если вы создаете приложение с Vue.js, скорее всего, захочется использовать лучшие практические леса, предоставленные Vue CLI 3.

Но если приложение Vue является клиентским слоем приложения Full-Stack JavaScript, например, в конфигурации «MOVN» (Mongo, Express, Vue, Node), не совсем понятно, насколько Vue CLI 3 должен быть интегрирован в такой состав.

Есть несколько подходов, которые вы могли бы разумно принимать:

  1. Поместите свой сервер в совершенно отдельный репо
  2. Создайте REPO для своего сервера и поместите свой Vue CLI 3 Ecaffold в подпункте
  3. Создайте «универсальную» структуру, изменяя вашу VUE CLI 3 Scaffold, чтобы поделиться с вашим сервером
  4. Вывод, что не подходит использовать Vue CLI 3 для структуры полной стеки и бросить собственную конфигурацию.

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

Делать этот выбор, был особый интерес для меня, когда я думал о лучшем подходе, чтобы взять для моего Предприятие Vue Курс, который сосредоточен вокруг создания приложения MEVN. Я надеялся, что можно будет построить это приложение и по-прежнему воспользоваться VUE CLI 3.

Отложить до власти и опыта

Насколько я знаю, нет «официального» примера VUE CLI 3 в конфигурации полной стеки, и я представляю, что вряд ли когда-либо будет.

Но мы можем посмотреть, как другие функции JavaScript решали эту проблему.

Популярный и уважаемый полный патрубка приложения для полноцевого стека, который изложен на значит. Для углового приложения полного стека.

Эта котельная, и, на самом деле, почти все полные боковые пластины JavaScript Full-Stack, которые я мог найти, используйте Универсальный Подход, который я упомянул, где и клиент, и сервер обходится один и тот же каталог, дающий вам структуру, как это:

- client
  - components
    ...
  main.js
- server
  - routes
    ...
  index.js
  ...
package.json
...

Интересно, что средняя котельная также включает угловую CLI.

Универсальная папка структура плюсы и минусы

Посмотрев на примеры в дикой природе, похоже, что этот подход является самым популярным способом структурирования приложения Full-Stack JS.

Некоторые из преимуществ, которые я вижу:

  • Это эффективно, так как он позволяет вам поделиться Package.json , node_modules , Переменные среды и открывает возможность общего кода между клиентом и сервером.
  • Он облегчает установку и развертывание, как одна команда в Package.json Может использоваться для установки/развертывания всего приложения.
  • Легко читать и понимать.

Недостатком заключается в том, что если вы хотите использовать эту структуру приложения с Vue CLI 3, вам нужно будет изменить эшафот, что не без его недостатков.

Приспосабливание сервера в Vue CLI 3 Ecaffold

Vue CLI 3 не был разработан, чтобы поделиться своим пространством с сервером. Снижая на этот путь несколько проблем, которые вы столкнулись, включают в себя:

  • Это не нравится, когда вы изменяете структуру файла. Например, SRC Папка не может быть легко переименована.
  • Это угнает .env Файл и важные переменные среды, такие как порт, который обычно зарезервирован для сервера.
  • Некоторая конфигурация, такая как ESLINT, такая как ESLINT, не подходит для файлов серверов, поэтому вам придется их вручить их вручную.

Однако ни одна из этих проблем не является непреодолимой, и если вы сможете пройти через них, у вас будет чистая, поддерживаемая структура папки, с лучшими практиками и преимуществами нулевых конфигураций Vue CLI 3.

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше

Читайте ещё по теме: