v-form и v-text-field не работают в vue cli 3.0

В настоящее время я создаю проект с использованием Vue Cli 3. И для его пользовательского интерфейса я решил использовать Vuetify. Добавляя Vuetify в Vue Cli 3, я просто выполнил команду

vue add vuetify

Я могу использовать другие функции Vuetify, такие как v-layout, v-button и т. Д. Но всякий раз, когда я использую v-form или v-text-field, кажется, что это не работает. И ошибка:

[Предупреждение Vue]: Неизвестный пользовательский элемент: - Вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр "имя"

Может ли кто-нибудь помочь мне заставить эти вещи работать? Заранее спасибо!


vue.js vuetify.js vue-cli-3
person Dominic Lapitan    schedule 27.08.2018    source источник
comment
Какую версию vuetify вы используете? Не могли бы вы поделиться фрагментом кода, в котором вы используете v-text-field? У меня работает: codeandbox.io/s/vqm5m8lwz0   -  person Mahmud Adam    schedule 27.08.2018
comment
vue-cli-plugin-vuetify выглядит не очень хорошо. Я бы просто установил vuetify в ваш проект по старинке   -  person Phil    schedule 27.08.2018

Ответы (2)


arrow_upward
2
arrow_downward

Это случилось и со мной. Вроде проблема с импортом. Я решил, что импортировал файл vuetify css в мой main.js файл. Нравиться:

import 'vuetify/dist/vuetify.min.css';
person bibsbarreto    schedule 23.11.2018
comment
он не работает для vuejs3 - person cyril; 15.06.2021

arrow_upward
1
arrow_downward

Вы выбрали вариант «Использовать компоненты по выбору» в процессе установки vue-cli-plugin-vuetify? Если да, убедитесь, что вы также импортировали и добавили все необходимые компоненты в файл конфигурации plugins / vuetify.js.

Добавьте имена необходимых компонентов в оператор импорта.

import { 
  Vuetify, 
  VApp,
  ...,
  VForm,
  VTextField,
  ...
} from 'vuetify';

И убедитесь, что вы также добавили импортированные компоненты в раздел компонентов, где инициализируется vuetify.

Vue.use(Vuetify,{
components: {
VApp,
...,
VForm
VTextField,
...
}})

Дополнительная информация: https://vuetifyjs.com/en/guides/a-la-carte

person Jns    schedule 27.08.2018