时间戳

首页 > 解决方案 > 当包含在启用 Typescript 的 Vue.js 项目中时，Vuetify 停止工作

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

问题描述

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

这是我的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 。

标签： javascripttypescriptvue.jsvuetify.jsvue-cli-3

解决方案

那些还在用 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"
]

享受 ！！

推荐阅读