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

Question

我最近尝试创建一个结合了 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');

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

Answer 1

那些还在用 Vuetify + Vue + Typescript 遇到问题的人。

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

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

node_module/vuetify/types

这个文件需要添加到tsconfig.json

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

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

尽情享受吧！

Answer 2

它可能是一百万种东西中的任何一种，但是

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 纤维 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
        },
      },
    },
  ]
},