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

我最近尝试创建一个简单的应用程序，它结合了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', 
  },
})

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

下面是我的

main.ts

文件的配置：

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

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安装Vuetify。

这可能是一百万件事情中的任何一件，但是

1） 确认已正确设置，因为这是从“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安装sass sass加载程序-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样式加载程序（这是来自的示例，基本上我认为您应该全面查看，以确保不会错过任何其他设置步骤）：

---

这可能是一百万件事情中的任何一件，但是

1） 确认已正确设置，因为这是从“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安装sass sass加载程序-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样式加载程序（这是来自的示例，基本上我认为您应该全面查看，以确保不会错过任何其他设置步骤）：

---

那些仍然使用Vuetify+Vue+Typescript的用户会发现问题

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

添加vuetify后，您将在plugins文件夹下看到刚刚创建的文件名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+Vue+Typescript的用户会遇到麻烦

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

添加vuetify后，您将在plugins文件夹下看到刚刚创建的文件名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”而不是“vuetify/lib”加载它。这清除了错误，但现在出现了一个奇怪的错误，我猜元素已被识别，但它们的样式未被应用-例如，a被设置为普通标记的样式。@TKD21用我认为剩余的问题更新了我的答案使用sass加载程序提示允许我查看样式，但它们看起来不像我记得的Vuetify。例如，a在有问题的项目（第一个映像）中类似于此-->而通过Vue CLI（在非Typescript项目中使用Vue add vuetify）安装的项目中的a则类似于库中的第二个映像。两个按钮使用相同的设置，但外观不同。@TKD21尝试添加以下内容：导入“vuetify/dist/vuetify.min.css”，完成此操作，非常感谢！Vuetify文档让我很困惑，感谢您的快速回答和帮助！我已将您的答案标记为正确答案，但您可能希望在答案中添加import'vuetify/dist/vuetify.min.css'行！干杯我重新编辑了它，以便它从“vuetify”而不是“vuetify/lib”加载它。这清除了错误，但现在出现了一个奇怪的错误，我猜元素已被识别，但它们的样式未被应用-例如，a被设置为普通标记的样式。@TKD21用我认为剩余的问题更新了我的答案使用sass加载程序提示允许我查看样式，但它们看起来不像我记得的Vuetify。例如，a在有问题的项目（第一个映像）中类似于此-->而通过Vue CLI（在非Typescript项目中使用Vue add vuetify）安装的项目中的a则类似于库中的第二个映像。两个按钮使用相同的设置，但外观不同。@TKD21尝试添加以下内容：导入“vuetify/dist/vuetify.min.css”，完成此操作，非常感谢！Vuetify文档让我很困惑，感谢您的快速回答和帮助！我已将您的答案标记为正确答案，但您可能希望在答案中添加import'vuetify/dist/vuetify.min.css'行！干杯更多信息在这里更多信息在这里