Обнаружение компонентов в Nuxt.js
В этой статье мы узнаем, как работает обнаружение компонентов в NuxtJs. Nuxt.js — это бесплатная платформа веб-приложений с открытым исходным кодом, основанная на Vue.js, Node.js, Webpack и Babel.js. Nuxt вдохновлен Next.js, фреймворком аналогичного назначения, основанным на React.js.
Создайте приложение NuxtJS:
Шаг 1: Вы можете создать новый проект NuxtJs, используя следующую команду:
npx create-nuxt-app gfg
Шаг 2. Теперь перейдите к своему приложению, используя следующую команду:
cd gfg
Структура проекта: Это будет выглядеть так.
Импорт компонентов: в Nuxt.Js вам не нужно вручную импортировать компоненты. Вы можете просто добавить компонент в папку компонентов, и Nuxt.Js сделает всю работу за вас.
Пример: теперь давайте создадим новый компонент в папке компонентов с именем «Data.vue» и со следующим содержимым.
Data.vue
<template> <div> <h5>This is the Data Component - GeeksforGeeks</h5> </div> </template> |
index.vue: Теперь давайте воспользуемся компонентом на домашней странице. Добавьте приведенный ниже код в файл index.vue.
index.vue
<template> <div> <h3>This is the Home Page - GeeksforGeeks</h3> <Data/> </div> </template> |
Запустите приложение: запустите приложение, используя приведенный ниже код.
npm run dev
Выход:
Импорт вложенных компонентов: Вы также можете импортировать вложенные компоненты, изменив имя компонента во время использования.
Пример: давайте создадим новый файл с именем «файл» в каталоге компонентов, а внутри него создадим новый компонент с именем «Demo.vue» и со следующим содержимым.
Demo.vue
<template> <div> <h5>This is the Demo - GeeksforGeeks</h5> </div> </template> |
- index.vue: Теперь измените содержимое файла odex.vue.
index.vue
<template> <div> <h3>This is the Home Page - GeeksforGeeks</h3> <fileDemo/> </div> </template> |
Запустите приложение: запустите приложение, используя приведенный ниже код.
npm run dev
Выход: