这仅仅是个人为了防止忘记做的笔记而已，仅供参考，有不对的地方请纠正
组件这种东西用来封装多次使用的控件还是很有用处的，我还是挺喜欢这种模式，优化了前端的工作，写个组件也比较简单。下次有时间记录一下样式的复用
首先呢，使用webstorm创建一个新的Vue项目
创建完毕项目后，我们在component目录下创建一个index页面，然后在这里做测试，因为我所有的选择都是默认的，自己在做的时候可以根据实际需求来写，都无所谓，这不是重点。
那么重点来了，组件，我首先，引入Vue.js，引入完毕后来写组件
引入之后，使用component属性自定义所需的控件
vue.component(‘Hello‘,{ template:‘<h1>Hello World</h1>‘ });
我这里定义了一个Hello，我在页面上可以这么引用自定义组件
<div id="app"> <Hello></Hello> </div>
那么我运行之后在页面上显示的结果就是这样的，这就是一个最简单的组件使用方式。
至于Vue，可以自己去官网找下载链接，我这里就不放Vue的下载链接了，下面我附上整个页面的源码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Test</title> <script src="vue.min.js"></script> <script> vue.component(‘Hello‘,{ template:‘<h1>Hello World</h1>‘ }); new vue({ el:"#app" }); </script> </head> <body> <div id="app"> <Hello></Hello> </div> </body> </html>
原文：https://www.cnblogs.com/yinxuejunfeng/p/9221019.html