vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。
一、Vue.js组件系统每一个新技术的诞生，都是为了解决特定的问题。
组件的出现就是为了解决页面布局等等一些列的问题。
vue中的组件分为两种，全局组件和局部组件。
二、全局组件与局部组件 2.1全局组件通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
方式一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=""></script> </head> <body> <div > <!--使用方式一--> <global-component></global-component> </div> <script> // vue当中的组件分为全局组件和局部组件 // vue也是一个vue实例，创建时接收的参数与通过new创建的根实例类似，除了el这个属性名外 // 第一步注册一个组件 Vue.component("global-component", { template: `<h1>Hello Vue</h1>` }); new Vue({ el: "#app", data: { greeting: "Hello Vue", }, }) </script> </body> </html>