VueJS – Установка среды

VueJS – Установка среды

От автора: существует много способов, с помощью которых производится установка Vue JS. Некоторые из них будут описаны ниже.

Использование тэга script прямо в HTML-файле

Перейдите на домашнюю страницу официального сайта VueJS //vuejs.org/v2/guide/installation.html и загрузите vue.js. Вы увидите две версии – производственную версию и версию для разработчиков. Версия для разработчиков не является минимизированной, в то время как производственная версия – минимизирована, как показано на следующем скриншоте. Версия для разработчиков предоставляет предупреждения и режим отладки во время разработки проекта.

Использование CDN

Мы можем также начать использовать файл VueJS из библиотеки CDN. по данной ссылке //unpkg.com/vue вы можете найти самую новую версию VueJS. VueJS доступен также на jsDelivr (//cdn.jsdelivr.net/npm/vue/dist/vue.js) и cdnjs (//cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js). При необходимости мы можем разместить файлы на сервере и начать работу с VueJS.

Использование NPM

Если вы имеете дело с крупномасштабными приложениями, то рекомендуется выполнять установку VueJS, используя npm-пакет. Он работает вместе с Browserify и Webpack, а также другими необходимыми инструментами, которые помогают в разработке. Ниже приведена команда установки с использованием npm.

Использование командной строки CLI

VueJS также представляет CLI для установки vue и начала работы с активацией сервера. Чтобы выполнить установку с использованием CLI, нам нужно будет установить CLI, это можно сделать при помощи следующей команды.

После этого мы можем увидеть версию CLI для VueJS. Установка может занять несколько минут.

Ниже приведена команда для создания проекта с использованием Webpack.

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

После выполнения npm run dev, запускается сервер и выдаётся url для отображения в браузере, как показано на следующем скриншоте.

Структура проекта с использованием CLI выглядит следующим образом:

Источник: //www.tutorialspoint.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: