Руководство. Vue.js для начинающих
Если вы только начинаете свое знакомство с Vue.js, это руководство поможет вам приступить к работе.
- Ознакомление с песочницей Vue.js для HelloWorld
- Использование Node.js в Visual Studio Code
Необходимые компоненты
- Сначала необходимо установить Vue.js в Windows или в подсистеме Windows для Linux (WSL). Не знаете, какую ОС использовать? Для новичков мы рекомендуем выполнить установку в Windows в целях обучения, а для опытных разработчиков — в WSL. См. статью Выбор между установкой Node.js в Windows или подсистеме Windows для Linux.
Использование Node.js в Visual Studio Code
Установите VS Code, если еще не сделали этого. Мы рекомендуем установить VS Code в Windows, независимо от того, что вы планируете использовать: Vue в Windows или WSL.
- Откройте командную строку и создайте новый каталог с помощью команды mkdir HelloVue , а затем введите каталог: cd HelloVue .
- Установите Vue CLI: npm install -g @vue/cli .
- Создайте приложение Vue: vue create hello-vue-app . Необходимо выбрать какое представление вы хотите использовать представление Vue 2 или Vue 3 Preview, или выбрать необходимый функции вручную.
- Откройте каталог нового приложения hello-vue-app: cd hello-vue-app .
- Попробуйте запустить новое приложение Vue в веб-браузере: npm run serve . В веб-браузере на сайте http://localhost:8080 должно появиться сообщение «Welcome to your Vue.js App» (Добро пожаловать в приложение Vue.js). Чтобы остановить работу сервера vue-cli-service, нажмите клавиши Ctrl+C .
Примечание. При использовании WSL (с Ubuntu или предпочтительным дистрибутивом Linux) для работы с этим руководством убедитесь, что установлено расширение Remote — WSL, которое обеспечит оптимальную работу и редактирование кода с помощью удаленного сервера VS.
Дополнительные ресурсы
- Использование Vue в Visual Studio Code. Узнайте больше об использовании Vue с VS Code, в том числе о расширении Vetur, которое обеспечивает выделение синтаксиса Vue, IntelliSense, поддержку отладки и многое другое.
- Документация по Vue.js
- Сравнение Vue с другими платформами, такими как React или Angular
- Общие сведения о Vue.js
- Выполните первые шаги с помощью схемы обучения Vue.js
Установка Vue.js непосредственно в Windows
Это руководство поможет вам настроить среду разработки Vue.js в ОС Windows. Дополнительные сведения см. в статье Общие сведения о Vue.js.
Vue можно установить непосредственно в Windows или подсистеме Windows для Linux (WSL). Обычно мы рекомендуем установку Vue в WSL, если вы планируете взаимодействовать с серверной частью Node.js, хотите обеспечить согласованность с рабочим сервером Linux или будете выполнять команды Bash. Дополнительные сведения см. в статье Выбор между установкой в Windows и подсистеме Windows для Linux.
Необходимые компоненты
- Установите Node.js в Windows, включая диспетчер версий, диспетчер пакетов и Visual Studio Code. Для установки Vue.js используется npm.
Установка Vue.js
Чтобы установить Vue.js, сделайте следующее:
- Откройте командную строку (например, командную строку Windows или PowerShell).
- Создайте новую папку проекта mkdir VueProjects и войдите в этот каталог: cd VueProjects .
- Установите Vue.js с помощью npm:
npm install vue Проверьте номер установленной версии с помощью команды vue —version .
Чтобы установить Vue.js с помощью CDN, а не npm, см. документацию по установке Vue.js. Также см. описание разных сборок Vue в документации по Vue.
Установка Vue CLI
Vue CLI — это набор средств для работы с Vue в окне терминала или командной строке. Они позволяют быстро сформировать шаблон нового проекта (vue create), создать прототип новых идей (vue serve) или управлять проектами с помощью графического пользовательского интерфейса (vue ui). Vue CLI — это глобально установленный пакет npm, который устраняет некоторые сложности при сборке (например, при использовании Babel или webpack). Если вы не создаете одностраничное приложение, вы можете не использовать Vue CLI.
Чтобы установить Vue CLI, используйте npm. Используйте флаг -g для глобальной установки и обновления ( vue upgrade —next ):
npm install -g @vue/cli Дополнительные сведения о надстройках, которые можно добавить (например, для анализа кода или Apollo для интеграции GraphQL), см. в описании надстроек Vue CLI в документации по Vue CLI.
Дополнительные ресурсы
- Документация по Vue
- Общие сведения о Vue.js
- Выбор между установкой в Windows и подсистеме Windows для Linux (WSL)
- Установка Vue.js в WSL
- Установка Nuxt.js
- Выполните первые шаги с помощью схемы обучения Vue.js
- Руководство по работе с Vue в VS Code
как установить vue js
Vue.js предоставляет несколько способов для установки и создания приложения и быстрого запуска приложения.
Для этого должен быть установлен Node.js. Вы можете загрузить его с официального сайта https://nodejs.org/en/ .
Теперь откроем терминал и выполним команду:
По окончанию установки переходим в папку Vue.js приложения, устанавливаем зависимости и запускаем сборку в режиме разработки.
cd npm install npm run dev Если вы хотите быстро загрузить фреймворк CDN и начать пользоваться, или узнать детали установки, подробную и свежую информацию можно найти на официальном сайте vuejs.org
Vue js как установить на windows
Для использования NativeScript-Vue ваша система должна быть правильно настроена, чтобы ваши приложения могли компилироваться.
Требования
- Node.js
- NativeScript CLI
- Windows (для разработки Android приложений на Windows)
- macOS (для разработки iOS и Android приложений на macOS)
- Linux (для разработки Android приложений на Linux)
Node.js
Загрузите и установите последнюю LTS версию Node.js на https://nodejs.org/. Перезапустите терминал и убедитесь, что установка прошла успешно с помощью команды node —version .
NativeScript CLI
Для установки NativeScript CLI откройте терминал и запустите команду:
Чтобы проверить, что установка прошла успешно, запустите tns в терминале. Вы должны увидеть список всех доступных команд.
Windows
Системные требования и инструкция по установке Android SDK для Windows:
macOS
Системные требования и инструкция по установке Xcode и Android SDK для Mac:
Linux
Системные требования и инструкция по установке Android SDK для Linux: