接文集上一篇。
新建的項(xiàng)目工程下迄损，在src文件夾下新建一個(gè)文件夾component作為存放組件的文件夾定躏，然后新建文件test.vue，如下圖所示芹敌。
文件結(jié)構(gòu)
在文件中編寫代碼：
<template>
<div id="test">
<h1>This is {{test}}</h1>
</div>
</template>
<script type="text/ecmascript-6">
export default {
data () {
return{
test:"testValue"
}
}
}
</script>
注意：這里綁定了test的值為testValue
默認(rèn)的index.html
在默認(rèn)的index.html中規(guī)定了其默認(rèn)入口是位于
src文件夾下的App.vue痊远，所以，我們?cè)贏pp.vue中進(jìn)行我們自己組件的注冊(cè)和顯示
使用import test from './component/test.vue'引入需要的組件氏捞。
在export default中添加components: {test}
完整的代碼如下圖所示碧聪。
添加組件
然后在頁(yè)面中顯示引入組件，使用<test></test>
test組件
其顯示效果：
顯示效果
