Создание приложения с помощью Vue CLI

  • 7 мин

Мы хотим создать приложение для бронирования путешествия на Луну для вымышленной компании Relecloud. Мы будем использовать Vue CLI для начальной загрузки приложения.

Установка Vue CLI

Vue CLI доступен через npm, средство упаковки, которое использует Node.js. Средство npm устанавливается автоматически при установке Node.js. Чтобы убедиться, что в системе установлены npm и Node.js, откройте окно командной строки или терминала и выполните следующие команды:

node -v
npm -v

Важно!

Vue CLI обычно устанавливается глобально через npm, что требует повышенных разрешений, если вы установили Node.js напрямую. Использование диспетчера версий node (nvm) позволяет выполнять установку от имени обычного пользователя. Вы можете установить nvm в Linux, подсистему Windows для Linux (WSL) или macOS или установить nvm-windows в Windows.

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

npm install -g @vue/cli

Установка Vue CLI в системе занимает несколько минут.

Начальная загрузка приложения

Самый быстрый способ начальной загрузки приложения Vue — интерфейс командной строки Vue. Теперь мы создадим начальное приложение с помощью Vue CLI.

  1. В командной строке или окне терминала перейдите к папке, в которой необходимо сохранить приложение.

  2. Создайте приложение Vue, выполнив следующую команду:

    vue create relecloud

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

    Screenshot of a menu with the option to manually select features highlighted.

  4. Чтобы выбрать функции, необходимые для проекта, используйте клавиши со стрелками для перехода к Babel и нажмите пробел, чтобы отключить его. Затем с помощью клавиш со стрелками перейдите к пункту Анализатор кода/форматировщик и нажмите пробел, чтобы отключить его.

    Screenshot of selected feature options.

  5. Нажмите клавишу ВВОД, чтобы подтвердить выбор функции.

    Примечание.

    Для рабочих проектов может потребоваться добавить дополнительные функции. Мы не будем рассматривать их в этом модуле.

  6. Когда вам будет предложено выбрать версию Vue.js, используйте клавиши со стрелками для перемещения в 3.x и нажмите клавишу ВВОД .

    Screenshot of the selected version Vue version.

  7. Когда появится запрос на выбор места размещения файлов конфигурации, оставьте значение по умолчанию В выделенных файлах конфигурации и нажмите клавишу ВВОД.

    Screenshot of the default selection for configuration files.

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

Проект будет создан, и необходимые библиотеки будут установлены. Процесс займет некоторое время.

Обзор кода

Давайте рассмотрим код, созданный Vue CLI.

  1. После завершения установки перейдите в каталог relecloud и откройте его в Visual Studio Code, выполнив следующие команды:

    cd relecloud
code .

  2. В Visual Studio Code откройте файл package.json.

  3. vue отображается как зависимость и @vue/cli-service указана в виде .devDependency>.

    Примечание.

    Часть @vue/cli-service отвечает за создание приложения и запуск сервера разработки.

  4. Обратите внимание на два сценария:

    • Сценарий serve запускает сервер разработки.
    • Сценарий build создает JavaScript, HTML или CSS, когда вы будете готовы опубликовать проект.

  5. Откройте файл public/index.html, где будет размещаться приложение Vue.

  6. Откройте src/main.js и запишите код, который импортирует App из App.vue.

  7. Откройте src/App.vue, содержащий основной компонент, который мы рассмотрим в следующем уроке.

    Примечание.

    Visual Studio Code может предложить расширение. Мы установим расширение позже.

  8. Обратите внимание на папку src/components, в которой будут храниться все компоненты.

Запуск сервера разработки

Начнем с сервера разработки и посмотрим на страницу по умолчанию.

  1. В Visual Studio Code откройте новое окно терминала, выбрав Терминал>Новый терминал.

  2. Во встроенном терминале выполните следующую команду, чтобы запустить сервер разработки:

    npm run serve

  3. Откройте свой браузер и перейдите по адресу http://localhost:8080.

    Откроется приложение Vue по умолчанию.

    Screenshot of the default Vue page.

Поздравляем! Вы создали приложение Vue с помощью Vue CLI.