问题
我在整个项目中有很多重用的导入,我想将其最小化以获得更简洁的代码。我在我的项目中使用类模型,并将它们导入几乎每个组件中。
到目前为止已完成故障排除
我开始使用单个文件进行测试。我在我的 main.ts 文件中导入了模型,并且在功能上它工作正常,但 Vetur 在我的 vscode 终端中抛出错误。那是怎么回事?如何消除这些错误?
301:19 Cannot find name 'ModelA'.
这是我必须在 Vetur 上查看的东西,它是这里的设置吗?
Main.ts
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
import ModelA from '@/models/ModelA'
Vue.config.productionTip = false;
Vue.config.devtools = true
new Vue({
router,
store,
vuetify,
render: (h) => h(App),
}).$mount('#app');
零件
<template>
<div>
<router-view></router-view>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
name: 'Action Page',
methods: {
doSomething(): ModelA {
//some work
return objectThatMatchesModelA
}
}
});
</script>
<style lang="stylus" scoped></style>
就像我说的那样,从功能上讲,这一切都正常工作,我可以从组件中删除导入,但问题是终端中的 vetur 错误。
ERROR 343:22 Cannot find name 'ModelA'.
我有一个垫片文件,它看起来像这样
shim-vue.d.ts
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env",
"jest"
],
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
],
"files": [
"./src/shims-tsx.d.ts"
]
}