说明
脚手架创建工程后，会自动创建一个 HelloWorld.vue ，这个组件只是一个例子，没什么用
为了便于理解，本文将 vue教程：全局组件（非单文件）-商品列表 改写成单文件组件
代码
创建组件
在 components 目录下创建文件：JdGoods.vue，内容如下：
<template>
<div class="goods">
<div >
<img :src="img">
</div>
<div >
{{name}}
</div>
<div>
￥{{price}}
</div>
</div>
</template>
<script>
export default {
name: 'JdGoods',
data: function(){ // 组件中的data必须是函数，必须返回 {} 对象
return { //数据
img:'img/mate60.png',
name:'华为R70 PRO',
price:1700
}
}
}
</script>
<style>
</style>
修改 App.vue
修改 App.vue 文件，移除 HelloWorld 组件，使用 JdGoods 组件，内容如下：
<template>
<!-- 模板 -->
<div id="app">
使用 JdGoods 组件（成对标签）：
<JdGoods></JdGoods>
------------------------------<br>
------------------------------<br>
使用 JdGoods 组件（单独一个标签）：
<JdGoods/>
</div>
</template>
<script>
//导入 JdGoods 组件
import JdGoods from './components/JdGoods.vue'
export default {
name: 'App',
components: {
JdGoods //注册局部组件
}
}
</script>
启动服务
npm run serve
访问
打开浏览器访问：http://localhost:8080/