От автора: существует много способов, с помощью которых производится установка Vue JS. Некоторые из них будут описаны ниже.
Использование тэга script прямо в HTML-файле
|
1 2 3 4 5 6 |
<html> <head> <script type = "text/javascript" src = "vue.min.js"></script> </head> <body></body> </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.
|
1 |
npm install vue |
Использование командной строки CLI
VueJS также представляет CLI для установки vue и начала работы с активацией сервера. Чтобы выполнить установку с использованием CLI, нам нужно будет установить CLI, это можно сделать при помощи следующей команды.
|
1 |
npm install --global vue-cli |
После этого мы можем увидеть версию CLI для VueJS. Установка может занять несколько минут.
|
1 2 |
+ vue-cli@2.8.2 added 965 packages in 355.414s |
Ниже приведена команда для создания проекта с использованием Webpack.
|
1 |
vue init webpack myproject |
Чтобы приступить к работе, используйте следующую команду.
|
1 2 3 |
cd myproject npm install npm run dev |
После выполнения npm run dev, запускается сервер и выдаётся url для отображения в браузере, как показано на следующем скриншоте.
Структура проекта с использованием CLI выглядит следующим образом:
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
