javascript - Vuetify slutade fungera när det inkluderades i ett TypeScript-aktiverat Vue.js-projekt

Jag har nyligen försökt skapa en enkel app som kombinerar Vue.js, Vuetify.js och Typescript. Men även om Vuetify först verkade fungera när det kombinerades med Typescript, får jag vid min senaste appkompilering endast felmeddelanden av typen "Okänd anpassad komponent".

Här är konfigurationen för min vuetify.js-fil:

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', 
  },
})

Och här är konfigurationen för min main.ts-fil:

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');

Jag installerade Vuetify med npm install vuetify och inte genom Vue CLI.

Svar #1

De som fortfarande har problem med Vuetify + Vue + Typescript.

vue create project-name
cd project-name
vue add vuetify

när din vuetify har lagts till, kommer du att se under plugins-mappen en fil som heter vuetify.ts som just skapats där du kan anpassa ditt vuetify-tema och också kommer vuetify att läggas till i main.ts. Sedan kommer du kunna hitta

node_module/vuetify/types

Denna fil behöver läggas till i tsconfig.json

"types": [
  ...
  "vuetify"
],

// then add this
"typeRoots": [
  "./node_modules/@types",
  "./node_modules/vuetify/types"
]

Njut !!

Svar #2

Det kan vara någon av en miljon saker, men

1) bekräfta att du har korrekt installerat VuetifyLoaderPlugin i webpack.config.js, eftersom det är vad som är avsett när du importerar Vuetify från 'vuetify/lib', annars skulle du göra fullständiga importer:

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

och 2) försök detta istället för din senaste nya Vue-rad:

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

3) UPPDATERA enligt din kommentar: du behöver också se till att du har rätt paket för att stilen ska laddas

npm install sass sass-loader fibers deepmerge -D

Lägg sedan till något liknande detta i reglerna i 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
                    }
                }}
            ]},

eller om du använder vue-style-loader (detta är exemplet från vuetify snabbstart, som jag egentligen tycker att du borde titta på i sin helhet för att försäkra dig om att du inte missar några andra installationssteg):

{
  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
        },
      },
    },
  ]
},