如何让茉莉读取单个文件vue组件

Question

因此，我通过NPM安装了茉莉花，但是当我导入组件本身（这是.vue文件）时，它无法读取模板，该模板是<template></template>标签之间的模板。我也在使用webpack，不确定我是否需要对此做某事。

这是vue组件文件的外观

<template>
  ...
</template>
<script>
  export default {
    name: 'test',
    data: {},
    computed: {}
  }
</script>

Answer 1

.vue文件需要编译，如果您使用的是webpack，则需要使用VUE-LOADER将模板转换为plain javascript，内部vue-loader将在模板标签和之间使用所有代码将它们转换为渲染功能。您应该首先查看单个文件组件的文档，然后从那里出发。

Answer 2

您需要使用vue-cli和webpack模板开始构建vue应用程序。

如果您仅开始使用vue.js，我建议您选择vue.js的独立版本，这是一个简单的JavaScript文件，您可以使用脚本标签，然后开始使用组件和模板来播放。

习惯了创建各种组件和定义模板的想法，您可以从Vue-CLI和WebPack模板开始构建复杂的应用程序。