无法在vue中使用类型记录
无法在vue中使用类型记录
提问于 2018-08-14 07:48:17
不久前，我使用vue init webpack .创建了一个vue项目，一切都很好。
现在我试着安装类型记录和ts-loader。我在src中创建了一个文件，其中包含：
declare module '*.vue' {
import Vue from 'vue'
export default Vue
}我添加了tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"strict": true,
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"sourceMap": true,
},
"include": [
"src/**/*.ts",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}我将main.js文件重命名为main.ts，将router/index.js重命名为router/index.ts。
对于webpack配置，我添加了/修改了几行：
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
ts: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/]
}
}
]
}
}
},
{
test: /\.ts$/,
loader: 'ts-loader'
},我为ts-loader添加了一些内容，并为vue-加载程序修改了一些内容( webpack的路径是build/webpack.base.conf.js)
运行npm run dev时没有错误，但是很少有警告。
这里的问题是文件src/components/HelloWorld.vue中存在
<template>
<div class="hello">
<h2>Essential Links</h2>
{{message}}
</div>
</template>
<script lang="ts">
import Vue from 'vue'
export default class AppTest extends Vue {
message: string = 'Hello!'
}
</script>Vue警告:属性或方法“消息”不是在实例上定义的，而是在呈现过程中引用的。通过初始化属性，确保此属性在数据选项中或在基于类的组件中是反应性的。
我尝试了很多方法来通过更新配置来修复这个问题，而所有的方法似乎都是无效的。
有人能帮我解决这个问题吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-14 09:05:12
如果要使用类样式组件，还需要将@Component装饰器添加到类中(假设您使用的是vue-class-component)：
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class AppTest extends Vue {
message: string = 'Hello!'
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51836298
复制相关文章
相似问题
腾讯云开发者
