Вы находитесь на странице: 1из 8

Инструкция для установки VUE CLI

Шаг первый – установка необходимых компонентов для Vue CLI.


Скачайте все необходимые компоненты для Vue CLI на ресурсе GitHub.com.

Шаг второй – установка Node.js.


Для работы с Vue CLI понадобится среда выполнения JavaScript – Node.js.
*Необходимо скачать версию Current, так как это самые последние версии среды / Установка
осуществляется на любой выбранный пользователем диск ОС.

Шаг третий – установка Vue CLI в систему.


После установки Node.js необходимо загрузить компоненты Vue CLI в саму систему,
делается это через командную строку.
Как запустить командную строку?

1) Нажать сочетание клавиш Win+R.


2) В появившееся поисковое поле вводим сокращение командной строки: cmd.

Пункт 1.
В командную строку мы введите следующий параметр:
npm install –g vue-cli

Пункт 2.
Создайте папку для проекта на любом диске (в данном случае диск «E») и после
обращаемся к этому диску.
Пункт 3.
Зайдите в созданную папку для проекта WebstormProjects в командной строке.

Введите команду « vue init webpack-simple vue-project » в командную строку.

Пункт 4.
Консоль выдаст строки с вопросами для создания проекта:

На всё нажмите «Enter», кроме последней строки «Use sass?», здесь введите букву N в
командную строку.
*N – No, значит «нет».

Пункт 5.
В последующих строчках консоль выдаёт, что проект был создан и даст подсказки,
которые нужно будет ввести по очереди:
cd vue-project

npm install

npm run dev

Шаг четвёртый – внесение изменений в файлы проекта.


Откройте в папке проекта папку «src» и файл «App.vue».
В коде мы видим шаблон <template>

В нём вносятся изменения для вывода контента на интернет-странице.

Пример:
В Visual Studio Code
На интернет-странице:

Шаг пятый – запуск приложения.


Пункт 1.
Откройте папку с проектом через Visual Studio Code.
Откройте папку «src» и выберите файл «main.js».

Пункт 2.
В коде есть метод «render» и функция «ES6».

Функция в другом формате:


*Данная функция как раз нам позволяет осуществить рендер, либо же запустить приложение.

Файл App.vue, где хранится всё приложение, импортируйте в main.js.

Файл App.vue:

Передайте в эту функцию «h» компонент, который был импортирован.

Пункт 3.
Зайдите в командную строку и в проект введите параметры:
npm run dev
*«dev» отвечает за запуск приложения.

Вам также может понравиться