前段时间我使用 vue init webpack .
创建了一个 vue 项目,
一切正常。
现在我尝试安装 typescript 和 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-loader 修改了一些东西(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 警告]:属性或方法“消息”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保此属性是 react 性的,无论是在数据选项中,还是对于基于类的组件
我尝试了很多方法来通过更新配置来解决这个问题,但似乎没有任何效果。
谁能帮我解决这个问题?
最佳答案
如果你想使用类风格的组件,你还需要在类中添加@Component
装饰器(假设你使用的是vue-class-component
):
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class AppTest extends Vue {
message: string = 'Hello!'
}
关于javascript - 无法在vue中使用 typescript ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51836298/