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

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

• попробуйте песочницу программного кода Vue.js HelloWorld
• Попробуйте использовать Node.js в Visual Studio Code

Предпосылки

• Сначала необходимо установить 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 (предварительная версия) или вручную выбрать нужные функции.

   

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 в Visual Studio Code: узнайте больше об использовании Vue с VS Code, включая расширение Vetur, которое предоставляет выделение синтаксиса Vue, IntelliSense, поддержку отладки и многое другое.

• Vue.js документы

• Сравнение Vue с другими платформами, такими как React или Angular

• Vue.js обзор

• сделайте первые шаги с Vue.js планом обучения