Привет, читатели! В этой статье я поделюсь подробной информацией о том, как настроить проекты Vue.js с помощью vue cli. Хотя это довольно просто, я вижу, что многие новички изо всех сил пытаются правильно настроить проект.
Предварительные требования: в вашей системе должны быть установлены npm и узел (см. здесь)
Чтобы упростить создание приложений с помощью Vue, существует интерфейс командной строки для оптимизации процесса разработки. Чтобы использовать пакет npm и интерфейс командной строки, вам понадобятся:
- Установлен Node.js 8.11+.
- npm
Чтобы установить CLI, выполните в терминале следующую команду:
npm install --global @vue/cli
После установки вы можете открыть терминал в каталоге, в котором хотите создать проект, и затем запустить vue create ‹имя вашего проекта›. Есть несколько предопределенных, и вы можете сделать свои собственные. Эти параметры позволяют настраивать такие вещи, как Vuex, линтинг, vue-router, тестирование и многое другое.
Выполните следующие действия: -
- В терминале перейдите в то место, где вы хотите создать образец приложения, а затем запустите vue create ‹app-name›.
- Используйте клавиши со стрелками и введите, чтобы выбрать параметр «Выбрать функции вручную».
- Первое меню, которое вам будет представлено, позволяет вам выбрать, какие функции вы хотите включить в свой проект. Убедитесь, что выбраны «Babel» и «Linter / Formatter». Если это не так, используйте клавиши со стрелками и пробел, чтобы включить их. После того, как они выбраны, нажмите Enter, чтобы продолжить.
- Затем вы выберете конфигурацию для линтера / форматтера. Перейдите к «Eslint только с предотвращением ошибок» и снова нажмите Enter. Это поможет нам выявить распространенные ошибки.
- Далее вас попросят настроить, какой вид автоматического линтинга нам нужен. Я предпочитаю «Lint on commit», но если вы новичок, выберите «List on Save». Это поможет вам лучше освоиться в разработке, так как будет проверять наличие ошибок, когда мы сохраняем файл внутри проекта. Нажмите Enter, чтобы продолжить.
- Теперь вы выберете, как мы хотим, чтобы ваши файлы конфигурации управлялись. «В выделенных файлах конфигурации» поместит ваши параметры конфигурации для таких вещей, как ESLint, в их собственные выделенные файлы. Другой вариант, «В пакете.json», поместит все ваши настройки конфигурации в
package.json
файл приложения. Выберите «В специальных файлах конфигурации» и нажмите Enter. - Наконец, вас спросят, хотите ли вы сохранить это как предустановку для будущих опций. Это полностью зависит от вас. Если вам нравятся эти настройки по сравнению с существующими пресетами и вы хотите использовать их снова, введите y, в противном случае введите n.
Запуск приложения локально: -
Vue CLI поставляется со встроенным сервером разработки. Это позволяет вам запускать приложение локально, чтобы вы могли легко его протестировать, не настраивая сервер самостоятельно.
В вашем терминале попробуйте запустить npm run serve
Вот и все, что вам удалось настроить и запустить базовый проект vue. Спасибо, что дочитали его до сих пор. Если у вас есть какие-либо проблемы, дайте мне знать в комментариях, я сделаю все возможное, чтобы решить ваши проблемы.