Интеграция Vuetify в приложение Vue CLI с помощью webpack - PullRequest
Новая
       103

Интеграция Vuetify в приложение Vue CLI с помощью webpack

0 голосов
/ 08 мая 2020

У меня есть приложение Vue CLI , использующее Webpack , в которое я интегрирую Vuetify . По какой-то причине я не могу правильно загрузить компоненты Vuetify .

Я получаю следующие предупреждения:

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «name».

Неизвестный пользовательский элемент: - правильно ли вы зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите параметр «имя».

JS File (newtab. js): 

import Vue from 'vue';
import Vuetify from '../plugins/vuetify' 
import App from './App';

Vue.use(Vuetify);

new Vue({
  Vuetify,
  components: { App }, 
  render: h => h(App)
}).$mount('#app')

Файл подключаемого модуля Vuetify: 

import Vue from 'vue';
import Vuetify from 'vuetify/lib'; 
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);
export default new Vuetify({});

Vue Файл (приложение vue): 

<template>
    <v-app id="inspire">
      <v-alert type="success">
          I'm a success alert. {{ message }}
      </v-alert>
    </v-app>
</template>

<script>
//import { VApp, VAlert } from 'vuetify/lib' 

export default {
  data () {
    return {
      message: "Additional message"
    }
  }
}
</script>

<style scoped>
    p { font-size: 20px; }
</style>

Я пробовал использовать vue -loader для динамического импорта компонентов, убедившись, что пакеты vue -cli-plugin-vuetify и vue -loader были загружены на сегодняшний день. 

├── vue-cli-plugin-vuetify@2.0.5 
└── vue-loader@15.9.1

Я также пробовал вручную импортировать компоненты, как в основной файл JS, так и в сам файл Vue: 

import Vue from 'vue';
import Vuetify, {
    VApp, VAlert
} from 'vuetify/lib';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify, {
    components: {
        VApp, VAlert
    }
});
export default new Vuetify({});

1 Ответ

2 голосов
/ 08 мая 2020

Чтобы установить Vuetify в проект Webpack, вам необходимо добавить несколько зависимостей: 

$ npm install vuetify

После установки найдите файл webpack.config. js и скопируйте приведенный ниже фрагмент в массив правил. Если у вас настроено существующее правило sass, вам может потребоваться применить некоторые или все изменения, указанные ниже. Если вы хотите использовать vuetify-loader для встряхивания деревьев, убедитесь, что вы используете версию Webpack> = 4. 

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

Создайте файл плагина для Vuetify, src / plugins / vuetify. js со следующим содержимым: 

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Теперь вы можете использовать компоненты Vuetify. От https://vuetifyjs.com/en/getting-started/quick-start/

...