Привет, читатели! В этой статье я поделюсь подробной информацией о том, как настроить проекты Vue.js с помощью vue cli. Хотя это довольно просто, я вижу, что многие новички изо всех сил пытаются правильно настроить проект.

Предварительные требования: в вашей системе должны быть установлены npm и узел (см. здесь)

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

  1. Установлен Node.js 8.11+.
  2. npm

Чтобы установить CLI, выполните в терминале следующую команду:

npm install --global @vue/cli

После установки вы можете открыть терминал в каталоге, в котором хотите создать проект, и затем запустить vue create ‹имя вашего проекта›. Есть несколько предопределенных, и вы можете сделать свои собственные. Эти параметры позволяют настраивать такие вещи, как Vuex, линтинг, vue-router, тестирование и многое другое.

Выполните следующие действия: -

  1. В терминале перейдите в то место, где вы хотите создать образец приложения, а затем запустите vue create ‹app-name›.
  2. Используйте клавиши со стрелками и введите, чтобы выбрать параметр «Выбрать функции вручную».
  3. Первое меню, которое вам будет представлено, позволяет вам выбрать, какие функции вы хотите включить в свой проект. Убедитесь, что выбраны «Babel» и «Linter / Formatter». Если это не так, используйте клавиши со стрелками и пробел, чтобы включить их. После того, как они выбраны, нажмите Enter, чтобы продолжить.
  4. Затем вы выберете конфигурацию для линтера / форматтера. Перейдите к «Eslint только с предотвращением ошибок» и снова нажмите Enter. Это поможет нам выявить распространенные ошибки.
  5. Далее вас попросят настроить, какой вид автоматического линтинга нам нужен. Я предпочитаю «Lint on commit», но если вы новичок, выберите «List on Save». Это поможет вам лучше освоиться в разработке, так как будет проверять наличие ошибок, когда мы сохраняем файл внутри проекта. Нажмите Enter, чтобы продолжить.
  6. Теперь вы выберете, как мы хотим, чтобы ваши файлы конфигурации управлялись. «В выделенных файлах конфигурации» поместит ваши параметры конфигурации для таких вещей, как ESLint, в их собственные выделенные файлы. Другой вариант, «В пакете.json», поместит все ваши настройки конфигурации в package.json файл приложения. Выберите «В специальных файлах конфигурации» и нажмите Enter.
  7. Наконец, вас спросят, хотите ли вы сохранить это как предустановку для будущих опций. Это полностью зависит от вас. Если вам нравятся эти настройки по сравнению с существующими пресетами и вы хотите использовать их снова, введите y, в противном случае введите n.

Запуск приложения локально: -

Vue CLI поставляется со встроенным сервером разработки. Это позволяет вам запускать приложение локально, чтобы вы могли легко его протестировать, не настраивая сервер самостоятельно.

В вашем терминале попробуйте запустить npm run serve

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