Поделиться через


Руководство по Vue.js для начинающих

Если вы не знакомы с Vue.js, это руководство поможет вам начать с основ.

Предпосылки

  • Сначала необходимо установить Vue.js на Windows или в подсистеме Windows для Linux.

Попробуйте использовать NodeJS с помощью Visual Studio Code

Если у вас его еще нет, установить VS Code. Мы рекомендуем установить VS Code в Windows независимо от того, планируется ли использовать Vue в Windows или WSL.

  1. Откройте командную строку и создайте новый каталог: mkdir HelloVueзатем введите каталог: cd HelloVue

  2. Установите интерфейс командной строки Vue: npm install -g @vue/cli

  3. Создайте приложение Vue: vue create hello-vue-app

    Вам потребуется выбрать, следует ли использовать Vue 2 или Vue 3 (предварительная версия) или вручную выбрать нужные функции.

    пресет интерфейса командной строки Vue

  4. Откройте каталог нового приложения hello-vue-app: cd hello-vue-app

  5. Попробуйте запустить новое приложение Vue в веб-браузере: npm run serve

    Вы должны увидеть "Добро пожаловать в ваше приложение Vue.js" в http://localhost:8080 в вашем браузере. Чтобы остановить сервер vue-cli-service, можно нажать клавишу Ctrl+C .

    Замечание

    Если для этого руководства используется WSL (с Ubuntu или вашим любимым дистрибутивом Linux), необходимо убедиться, что у вас установлено расширение Remote - WSL для оптимального выполнения и редактирования кода с помощью удаленного сервера VS Code.

  6. Попробуйте обновить приветственное сообщение, открыв исходный код приложения Vue в VS Code, введите: code .

  7. VS Code запустит и отобразит приложение Vue в проводнике. Запустите ваше приложение в терминале еще раз с npm run serve и откройте ваш веб-браузер по адресу localhost, чтобы вы могли увидеть отображаемую страницу приветствия Vue. Найдите файл App.vue в VS Code. Попробуйте изменить "Добро пожаловать в приложение Vue.js" на "Добро пожаловать в джунгли!". Вы увидите, как ваше приложение Vue "перезагружается в режиме горячей замены" сразу после того, как вы сохраните изменения.

    горячая перезагрузка приложения Vue при изменении анимированного GIF

Дополнительные ресурсы