Эта статья для абсолютных новичков в VueJS, JavaScript-фреймворке с открытым исходным кодом для создания пользовательских интерфейсов.

Начало работы с настройкой VueJS🎉!

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

Установка NodeJS

Прежде чем вы сможете запускать приложение VueJS локально, вы должны установить NodeJS. NodeJs — это среда выполнения JavaScript, которая выполняет современный код JS в браузере.

После установки (пере)запустите интерфейс терминала/CLI и введите :

npm -v

Вы должны увидеть номер версии, такой как:

6.14.8

Вышеупомянутая версия является просто примером, когда я пишу эту статью, я использую вышеуказанную версию, я предпочитаю использовать последнюю версию узла.

npm (диспетчер пакетов Node) — мы будем использовать его для установки зависимостей проекта с помощью таких команд, как «npm install package-name –save», и для запуска нашего приложения VueJS внутри сервера Node с помощью таких команд, как как «npm run serve» и «npm start».

Установка vue-кли

Vue-cli — это помощник командной строки для создания приложений VueJS и управления ими.

Давайте установим его глобально с помощью npm, чтобы мы могли использовать его из нашего интерфейса командной строки:

npm install -g @vue/cli

После установки (пере)запустите терминал CLI, чтобы убедиться, что в него загружены последние команды, и проверьте работу vue-cli, запустив:

vue --version

Создадим новый проект

Создание проекта с помощью командной строки

1. В интерфейсе командной строки перейдите в каталог, в котором вы хотите создать проект.

2. Выполните следующую команду:

vue create project-name

3. С помощью клавиш со стрелками выделите значение по умолчанию и нажмите ввод/возврат:

Примечание.Babel — это транспилятор, который преобразует наш ультрасовременный синтаксис JavaScript в читаемый браузером JavaScript, HTML и CSS.

4. Подождите, пока ваш проект будет сгенерирован, и нажмите cd имя-проекта.

5. Запустите «npm run serve». Подождите, пока приложение скомпилируется, и вы должны увидеть что-то вроде следующего:

npm run serve запускает сервер разработки, который следит за изменениями в исходном коде нашего приложения. Обратите внимание, что другие люди в вашей сети могут посещать ваше приложение, используя IP-адрес -Network, отображаемый в вашем интерфейсе командной строки.

6.Откройте браузер и перейдите по URL-адресу, указанному на вашем терминале, в приведенном выше случае http://localhost:8080. Вы должны увидеть следующее:

Генерация проекта с использованием графического интерфейса

1. В интерфейсе командной строки перейдите в каталог, в котором вы хотите создать проект.

2. Выполните следующую команду:

vue ui

После выполнения этой команды в браузере по умолчанию появится панель инструментов vue ui.

3. Перейдите в менеджер проектов Vue.

4. Нажмите «Создать новый проект», и появится показанный ниже экран.

5. Введите имя проекта, выберите диспетчер пакетов по умолчанию (я предлагаю NPM)

6. Нажмите Далее.

7. Выберите «Предустановка по умолчанию» и нажмите «Создать проект».

8. Подождите, пока ваш проект будет сгенерирован, и нажмите cd имя-проекта.

9. Запустите «npm run serve». Подождите, пока приложение скомпилируется, и вы должны увидеть что-то вроде следующего:

10. Откройте браузер и перейдите по URL-адресу, указанному на вашем терминале, в приведенном выше случае http://localhost:8080. Вы должны увидеть следующее:

Поздравляем🎉!!! Спешите создать свой собственный проект Vue.JS прямо сейчас 🥳 !!!