Vue.js 如何在html中使用.vue文件？_Vue.js

Vue.js 如何在html中使用.vue文件？

vue.js

Vue.js 如何在html中使用.vue文件？,vue.js,Vue.js,我创建了一个hello.vue文件，现在如何在html文件中使用它？我已经设置了一个网页包 <template> <p>Hello</p> <p>{{message}}</p> </template> <script> module.exports = { data: { message: 'hello' } } </script> <style>

我创建了一个hello.vue文件，现在如何在html文件中使用它？我已经设置了一个网页包

<template>
<p>Hello</p>

<p>{{message}}</p>

</template>

<script>
module.exports = {
    data: {
        message: 'hello'
    }
}
</script>

<style>
p {
    font-size: 14px
}
</style>


你好
{{message}}
module.exports={
数据：{
留言：“你好”
}
}
p{
字号：14px
}

您想如何使用它

从官方的例子来看：。这是一个组件，因此可以在另一个vue文件中导入，如：

并将其添加到组件列表中：

您可以在HTML中使用它，如：

您只需将捆绑的.js文件包含在HTML文件中，并包含mounter div，这样Vue就可以知道在哪里执行应用程序

您的索引文件可能如下所示（仅显示正文部分）

通过这种方式，您可以将所有其他组件存储到hello.vue中

这可能是您在构建SPA时应该使用的方法。

谢谢，因此我们将组件导入另一个.vue文件，然后在html中使用此.vue文件，是否可以在html文件中直接使用该组件？@AngeloC a将仅在vue实例中工作，这是您将定义的

新vue（{…}）的地方

当您说在HTML文件中使用该组件时，您的意思是在新的Vue（）中将其作为组件使用吗？您必须运行Vue cli吗？

import Comment from '../components/Comment.vue'

components: { Spinner, Comment },

<comment v-for="id in item.kids" :key="id" :id="id"></comment>

...
<body>

  <div id="app"></div>

  <script src="bundle.js">
</body>
...

import Vue from 'vue'
import Hello from 'hello.vue'

const app = new Vue({
  render: (h) => h(Hello)
}).$mount('#app')