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

我創建了一個hello.vue文件，現在如何在html文件中使用它？我已經安裝了一個webpack，如何在html中使用.vue文件？

<template> 
<p>Hello</p> 

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

</template> 

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

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

來源

2017-03-11 AngeloC

當你說，在HTML文件中使用該組件，你的意思是在一個新的Vue（）中使用它作爲一個組件嗎？ – Bert

你想如何使用它？

以官方爲例：vue-hackernews-2.0。這是一個組成部分，所以在導入component在另一個VUE文件中像this：

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

，你在組件列表中that vue instance補充：

components: { Spinner, Comment },

比你可以用它在HTML像this：

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

來源

2017-03-11 15:11:50 Saurabh

謝謝，所以我們將組件導入到另一個.vue文件中，然後在html中使用該.vue文件，是否可以直接在html文件中使用該組件？ – AngeloC

@AngeloC A [vue組件]（https://vuejs.org/v2/guide/components.html）只能在vue實例中使用，這是你將要定義'new Vue（{...}）的地方' – Saurabh

你只需要提供您的捆綁.js文件在HTML文件中，包括貼片格 - Vue公司這樣能知道在哪裏執行應用程序。

你的索引文件可能看起來像這樣（只顯示正文部分）

... 
<body> 

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

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

你的主要Vue的文件可能是這樣的：

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

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

並以這種方式，你可以將所有其他組件進入hello.vue。

這可能是您在建造SPA時應該使用的方法。

來源

2017-03-11 15:16:07

你必須運行vue-cli嗎？ – Martian2049

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

回答

相關問題