Эта статья для абсолютных новичков в VueJS, JavaScript-фреймворке с открытым исходным кодом для создания пользовательских интерфейсов.
Начало работы с настройкой VueJS🎉!
Настройка среды
Установка NodeJS
Прежде чем вы сможете запускать приложение VueJS локально, вы должны установить NodeJS. NodeJs — это среда выполнения JavaScript, которая выполняет современный код JS в браузере.
- Инструкции по установке macOSNodeJSи HomeBrew или Инструкции по установке macOS NodeJS
- Инструкции по установке Windows NodeJS
- Инструкции по установке Linux NodeJS
После установки (пере)запустите интерфейс терминала/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 прямо сейчас 🥳 !!!