Vuetify 在包含在启用 Typescript 的 Vue.js 项目中时停止工作

Question

我最近尝试创建一个结合了 Vue.js、Vuetify.js 和 Typescript 的简单应用程序。然而，尽管一开始 Vuetify 似乎在与 Typescript 结合使用时可以正常工作，但在我最近的应用程序编译中，我得到的只是 "Unknown custom component".[=16 类型的错误消息=]

这是我的 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');

我使用 npm install vuetify 而不是通过 Vue CLI 安装了 Vuetify。

Answer 1

它可能是一百万种事物中的任何一种，但是

1) 确认您已正确设置 VuetifyLoaderPlugin in webpack.config.js,，因为这是您从 'vuetify/lib' 导入 Vuetify 时的目的，否则您将进行完整导入：

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 install sass sass-loader fibers 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 quick start 的示例，基本上我认为您应该完整地看一下以确保您没有遗漏任何其他设置步骤):

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

Answer 2

那些还在为 Vuetify + Vue + Typescript 找麻烦的人。

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

添加 vuetify 后，您会在插件文件夹下看到刚刚创建的文件名 vuetify.ts，您可以在其中自定义 vuetify 主题，并且 vuetify 也将添加到 main.ts。然后你就能找到

node_module/vuetify/types

此文件需要在tsconfig.json

中添加

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

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

尽情享受吧!!

Vuetify 在包含在启用 Typescript 的 Vue.js 项目中时停止工作

Vuetify stopped working when included in a Typescript-enabled Vue.js project

javascript

typescript

vue.js

vuetify.js

vue-cli-3