В этом руководстве вы узнаете, как приступить к работе с проектом Vue 3 с нуля с помощью пошаговых инструкций.

  1. Установить пакет Node.js и NPM
  2. Установите Vue CLI 4.5 или выше
  3. Создать проект Vue 3
  4. Запуск веб-приложения Vue 3

1. Установите пакет node.js и npm

Первый шаг — установить Node.js и NPM (диспетчер пакетов Node) на свой компьютер.

Вы можете проверить, установлены ли они уже, перейдя в окно терминала/командной строки на вашем компьютере и выполнив пару команд.

Чтобы проверить установленную версию узла js,

node -v

Если он у вас уже установлен, убедитесь, что это версия 10 или выше.

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

npm -v

Если они не установлены, вы получите сообщение «команда не найдена» или что-то подобное при запуске команд проверки версии node и npm.

В этом случае вам нужно будет их установить.

Итак, перейдите на Веб-сайт Node.js в своем браузере — вы можете увидеть две версии, и я бы рекомендовал использовать LTS, которая является более стабильной версией, и она также рекомендуется для большинства пользователей.

Нажмите кнопку LTS, после чего начнется загрузка файла пакета Node.js на компьютер.

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

Как видно из вкладки введение, я устанавливаю не только node.js, но и npm — поэтому нам не нужно устанавливать их отдельно.

Нажмите Продолжить, Продолжить,

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

Следующим шагом будет установка Vue CLI.

2. Установите Vue CLI

Итак, что такое Vue CLI?

Vue CLI — это официальный пакет vue npm, который позволяет быстро создать проект vue на вашем компьютере.

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

Откройте окно терминала и выполните следующую команду

npm install -g @vue/cli

Процесс установки займет несколько секунд.

Если он говорит, что у вас нет разрешения, просто запустите команду еще раз, добавив перед ней sudo, что попросит вас ввести пароль администратора, и тогда все будет готово.

sudo npm install -g @vue/cli

Чтобы создать проект vue 3, нам нужна версия vue cli не ниже 4.5 или выше.

Если вы уже установили vue cli, вы можете проверить версию с помощью следующей команды.

vue --version

Если у вас версия ниже 4.5, вы можете просто обновить ее, выполнив приведенную ниже команду.

npm upgrade --next

Следующим шагом будет создание проекта vue 3.

3. Создайте проект Vue 3.

Для этого откройте терминал и перейдите на рабочий стол, набрав:

cd ~/Desktop

Затем введите:

vue create my-project-name

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

Это начнет создание нашего проекта vue 3 с именем проекта в качестве имени папки.

Создание проекта vue 3 и установка его зависимостей по умолчанию займет несколько секунд.

Как только это будет сделано, вы увидите папку с названием проекта на рабочем столе.

Последний шаг — запустить проект vue 3 в браузере.

4. Запустите проект

Как видите, окно моего терминала дает мне две команды для запуска проекта.

Первая команда — зайти в папку проекта:

CD my-project-name

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

npm run dev

Чтобы быть организованным, я собираюсь запустить проект из своего редактора Visual Studio Code, а не из окна терминала.

Перейдите в папку Приложения → Visual Studio Code.

Затем Файл → Открыть → Затем перейдите к папке проекта, которую мы создали на рабочем столе, и нажмите открыть.

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

Как видите, терминал уже подключен к проекту, поэтому мне не нужно использовать первую команду:

CD my-project-name

Все, что мне нужно сделать, это запустить команду npm run serve.

Который запустит сервер на моем компьютере и даст мне URL-адрес localhost.

Как видите, я получаю два: один — localhost, а другой — сетевой URL-адрес, который отлично подходит, когда вы хотите увидеть проект на нескольких устройствах, например, проверить пользовательский интерфейс проекта на своем мобильном телефоне.

Откройте браузер, скопируйте URL-адрес сети и вставьте его туда.

На данном этапе мы успешно запустили наше приложение Vue 3.

Далее → Различия Ref и Reactive в API композиции #Vuejs 3

Вам также может понравиться это:

Проверка состояния кнопки отправки в API композиции Vuejs

Реактивность входного поля Vue 3 между родительско-дочерними компонентами

Скачать исходный код

Проверка многоразовой/масштабируемой формы Vue JS 3 Composition API — полное руководство

Панель поиска Vuejs 3 с использованием вычисляемых свойств [API композиции]