VueJS - Настройка среды

Есть много способов установить VueJS. Некоторые способы выполнения установки обсуждаются заранее.

Использование тега <script> непосредственно в файле HTML

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

Перейти на домашний сайт https://vuejs.org/v2/guide/installation.htmlVueJS и загрузите vue.js по мере необходимости. Есть две версии для использования - производственная версия и версия для разработки. Версия для разработки не свернута, тогда как производственная версия свернута, как показано на следующем снимке экрана. Версия для разработки поможет с предупреждениями и режимом отладки во время разработки проекта.

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

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

При необходимости мы можем разместить файлы на нашем конце и начать разработку VueJS.

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

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

npm  install vue

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

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

npm install --global vue-cli

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

+ [email protected]
added 965 packages in 355.414s

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

vue init webpack myproject

Для начала используйте следующую команду.

cd myproject
npm install
npm run dev

Как только мы выполняем npm run dev, он запускает сервер и предоставляет URL-адрес для отображения в браузере, как показано на следующем снимке экрана.

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