Vue 应用里的自定义的组件，可以放在 src 下面的 components 这个目录的下面 .. 比如我们的应用需要一个显示内容列表的组件，组件的名字可以是 Posts .. 在 components 的下面，添加一个文件，名字是 Posts.vue ..

Vue 的每个组件都可以是一个单独的文件，文件的扩展名就是这个 .vue .. 组件的模板，放在一个 template 里面 ..

先随便添加点东西 .. 一个 div .. 包装一个 Posts ..

组件的脚本 .. 可以放在一组 script 标签里面 .. export default ，导出一个默认的对象 .. 对象里面就是组件提供的一些东西 .. 比如组件需要的生命周期方法， methods，还有 computed 等等 ..

里面先添加一个 name 属性，设置一下组件的名字 .. 这里设置成 Posts ..

然后再添加一个 data 方法 .. 这个方法可以返回组件需要的一些数据 .. return 一个对象 .. 里面添加一个 header 属性 .. 对应的值可以设置成 Posts ..

然后在组件的模板里面，用一下组件里的这个 header 数据 .. 两组大括号 .. 绑定一个 header ..

每个组件还可以有自己需要的一些样式 .. 这些样式可以放在一组 style 里面 .. 元素上可以再添加一个 scoped .. 这样在这里定义的样式只能用在这个组件里面 ..

添加一个 header 类 .. 定义一下它的样式 .. 用 font-size 设置一下字号 .. 大号是 18px .. 再用一个 color 属性设置一下文字的颜色 .. #6435c9 ..

然后在组件的模板里面，在这个 div 元素上添加一个 class .. 里面用一个 header 类 ..

再打开项目的路由 .. router 下面的 index.js ..

在文件的一开始，先导入刚才定义的组件 .. 名字可以是 Posts .. 位置是 @/components/Posts ..

在这个地址是 / 的路由里面， 重新设置一下路由的名字 .. 设置成 Posts .. 使用的 component 也是 Posts 这个组件 ..

再到浏览器上面去预览一下 ..

现在页面上显示的内容里面，这个 Posts 标题，就是刚才我们定义的 Posts 这个组件里的东西 ..