Question

让这个问题很简单。下列代码的哪个等效项适用于TypeScript和 Vue && vue-property-decorator组合？

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Answer 1

vue-property-decorator旨在通过TypeScript中的类样式语法扩展Vue组件。有问题的代码不符合标准，因为它不是组件。假设您打算在此单一文件组件中转换脚本：

App.vue ：

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

使用vue-property-decorator进行的转换如下所示：

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  message = 'Hello Vue!'
}
</script>

安装根目录保持不变（不会使用vue-property-decorator）：

<!-- index.html -->
<body>
  <div id="app"></div>

  <script>
    new Vue({
      el: '#app'
    });
  </script>
</body>

我建议使用vue-cli生成TypeScript项目（在提示符下选择TypeScript预设和“类样式语法” ）。

Vue＆TypeScript：vue-property-decorator / vue-class-component的'el'属性？

1 个答案: