Как создавать компоненты в Vue CLI

Vue.js предоставляет Vue Интерфейс командной строки для предоставления команды vue внутри терминала для быстрой сборки нового проекта Vue.js и запустите Vue.js с использованием vue serve команда. Vue.js также предоставляет графический пользовательский интерфейс для управления проектами с помощью vue ui команда. Vue.js признан сочетанием двух впечатляющих фреймворков, Angular и React, с использованием синтаксиса шаблонов Angular и метода props React. Он предоставляет традиционный способ создания компонентов HTML и CSS, и в этом посте мы рассмотрим процесс создания и понимания компонентов в Vue CLI.

Предпосылки

Перед тем, как приступить к этому, вам необходимо выполнить некоторые предварительные условия:

• Базовые знания HTML, CSS и JavaScript.
• Узел.js установлен в вашей операционной системе.

Проверьте установку Vue CLI

Прежде всего, убедитесь, что в вашей системе установлена ​​последняя версия Vue CLI. Вы можете проверить, установлен ли Vue CLI в нашей системе или нет, набрав команду, приведенную ниже:

$ vue --version

Если он установлен, у вас будет последняя версия Vue CLI, распечатанная в терминале. В противном случае, если он не установлен, вы можете использовать диспетчер пакетов NPM или диспетчер пакетов Yarn для установки Vue CLI. Чтобы установить его с помощью диспетчера пакетов NPM, вам необходимо ввести в терминале команду, указанную ниже:

$ npm install -g @ vue / cli

В приведенной выше команде -грамм flag используется для глобальной установки Vue CLI в вашей системе.

После того, как Vue CLI будет полностью установлен, вы можете проверить это, набрав команду, приведенную ниже:

$ vue --version

У вас будет последняя версия Vue CLI на выходе.

Создание проекта

Теперь предположим, что вы собираетесь настроить весь проект Vue самостоятельно. В таком случае изобретать велосипед - не лучший вариант; проект Vue можно создать с помощью vue в терминале, потому что Vue CLI предоставляет уже сгенерированные шаблоны для запуска проекта Vue.

Чтобы создать приложение Vue, просто введите в терминале команду, указанную ниже:

$ vue создать имя-проекта

Обязательно замените название проекта с желаемым названием проекта и нажмите Входить.

Через пару секунд он предложит выбрать предустановку по умолчанию или выбрать некоторые функции вручную.

Если вы хотите иметь некоторые настраиваемые функции, выберите «Выберите функции вручную», нажмите Enter, и вам будут предложены некоторые параметры, такие как выбор версии Vue, добавление Vuex или Router. Выберите желаемый вариант и нажмите Входить.

Ответьте на некоторые необходимые вопросы по настройке и сохраните пресет для будущих проектов.

Проект Vue будет создан через некоторое время с использованием Vue CLI, и вы можете начать разработку на Vue.js.

Запуск приложения Vue

После создания проекта Vue вы можете запустить проект, сначала перейдя в каталог проекта с помощью команды cd в терминале:

$ cd имя-проекта

В каталоге проекта запустите приложение Vue, набрав в терминале команду, указанную ниже:

$ npm run serve

После запуска приложения Vue перейдите по адресу http: // localhost: 8080 в адресной строке вашего любимого браузера:

У вас будет экран приветствия Vue.js проект.

Создание компонента во Vue

Для создания компонента в проекте Vue создайте .vue файл в составные части папку и укажите имя по вашему выбору.

Теперь, в этом недавно созданном .vue файл, вы можете писать HTML, Javascript и CSS в