Vuetify перестал работать, когда включен в проект Vue.js с поддержкой Typescript - PullRequest
Новая
       70

Vuetify перестал работать, когда включен в проект Vue.js с поддержкой Typescript

0 голосов
/ 20 сентября 2019

Недавно я попытался создать простое приложение, которое сочетает в себе Vue.js, Vuetify.js и Typescript.Однако, несмотря на то, что сначала Vuetify, казалось, работал в сочетании с Typescript, при последней сборке приложения я получаю только сообщения об ошибках типа "Неизвестный пользовательский компонент" .

Здесьэто конфигурация для моего vuetify.js файла: 

import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
icons: {
    iconfont: 'mdi', 
  },
})

А вот конфигурация для моего main.ts файла: 

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import './registerServiceWorker';
import vuetify from '@/plugins/vuetify.js';

Vue.config.productionTip = false;

new Vue({
  router,
  vuetify,
  render: (h) => h(App),
}).$mount('#app');

Я установил Vuetify, используя npm install vuetify, а не черезVue CLI.

1 Ответ

0 голосов
/ 20 сентября 2019

Это может быть любой из миллиона вещей, но

1) подтвердите, что вы правильно настроили VuetifyLoaderPlugin в webpack.config.js, , поскольку именно это и предназначается для васимпортировать Vuetify из 'vuetify / lib', иначе вы бы сделали полный импорт: 

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

и 2) попробуйте это вместо вашей последней новой строки Vue: 

let vue = new Vue({
    el: '#app',
    router: router,
    vuetify: vuetify,
    render: (h) => h(App)
});

3)ОБНОВЛЕНИЕ согласно вашему комментарию: вам также нужно убедиться, что у вас есть нужные пакеты для загружаемого стиля

npm установить волокна sass-загрузчика deepmerge -D

Затем в файле webpack.config.js добавьте что-то подобное в правила: 

            { test: /\.s(c|a)ss$/, use: [isDevBuild ? "style-loader" : MiniCssExtractPlugin.loader, "css-loader", {
                loader: 'sass-loader',
                // Requires sass-loader@^8.0.0
                options: {
                    implementation: require('sass'),
                    sassOptions: {
                        fiber: require('fibers'),
                        indentedSyntax: true // optional
                    }
                }}
            ]},

или если вы используете vue-style-loader (это пример из быстрого запуска vuetify (в принципе, я думаю, вам следует взглянуть полностью, чтобы убедиться, что вы не пропустили другие шаги настройки): 

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