前言
vue作为一个轻量级前端框架，其核心就是组件化开发。我们一般常用的是用脚手架vue-cli来进行开发和管理，一个个组件即为一个个vue页面，这种叫单文件组件。我们在引用组件之时只需将组件页面引入，再注册即可使用。那么不用脚手架，如何进行组件开发呢，本文先介绍一下基础知识吧。
组件使用流程
1.组件构建
1.1 extend构建法
调用Vue.extend()方法，构建一个名字为myCom的组件
1 var myCom = Vue.extend({ 2 template: '<div>这是我的组件</div>' 3 })
其中template定义模板的标签，模板的内容需写在该标签下
1.2 template标签构建法
template标签构建，需在标签上加id属性用以后期注册
1 <template id="myCom"> 2 <div>这是template标签构建的组件</div> 3 </template>
1.3 script标签构建法
script标签同样需加id属性，同时还得加type="text/x-template"，加这个是为了告诉浏览器不执行编译里面的代码
1 <script type="text/x-template" id="myCom1"> 2 <div>这是script标签构建的组件</div> 3 </script>
2.注册组件
（1）全局注册：一次注册，可在多个vue实例中使用，需调用Vue.component()方法，这个方法需传2个参数，第一个参数为组件名称，第二个参数为组件构造时定义的变量。
我们先用全局注册注册上面例子中创建的myCom组件
1 Vue.component('my-com',myCom) 2 还有一种不需构建直接注册的写法——注册语法糖 3 4 Vue.component('my-com',{ 5 'template':'<div>这是我的组件</div>' 6 })
'my-com'为给组件自定义的名字，在使用时会用到，后面myCom对应的就是上面构建的组件变量。
注意命名规范，一般组件名字以短横线分隔或一个小写单词。
例：footer-nav，footernav
如果是用template及script标签构建的组件，第二个参数就改为它们标签上的id值
1 Vue.component('my-com',{ 2 template: '#myCom' 3 })
（2）局部注册：只能在注册该组件的实例中使用
1 var app = new Vue({ 2 el: '#app', 3 components: { 4 'my-com': myCom 5 } 6 })
注册语法糖
1 var app = new Vue({ 2 el: '#app', 3 components: { 4 'my-com': { 5 template: '<div>这是我的组件</div>' 6 } 7 } 8 })
template及script构建的组件
1 var app = new Vue({ 2 el: '#app', 3 components: { 4 'my-com': { 5 template: '#myCom' 6 } 7 } 8 })
3.调用组件
我们只需在需要调用组件的地方写上组件名字的标签即可
1 <div> 2 /*调用组件*/ 3 <my-com></my-com> 4 </div>
4.例子
4.1 全局注册
新建一个html文件，引入vue.js，并且定义2个vue实例app1和app2
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue组件</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app1"> 10 <my-com></my-com> 11 </div> 12 <div id="app2"> 13 <my-com></my-com> 14 </div> 15 16 <script> 17 /*构建组件*/ 18 var myCom = Vue.extend({ 19 template: '<div>这是我的组件</div>' 20 }); 21 /*全局注册组件*/ 22 Vue.component('my-com',myCom); 23 24 /*定义vue实例app1*/ 25 var app1 = new Vue({ 26 el: '#app1' 27 }); 28 29 /*定义vue实例app2*/ 30 var app2 = new Vue({ 31 el: '#app2' 32 }); 33 </script> 34 </body> 35 </html>
打开浏览器查看效果
可以看到全局注册的组件在实例app1和实例app2中都可以被调用
一次注册，多处使用
4.2 局部注册
修改上面例子的html代码，将全局注册的组件改为局部注册，注册到实例app1下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue组件</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app1"> 10 <my-com></my-com> 11 </div> 12 <div id="app2"> 13 <my-com></my-com> 14 </div> 15 16 <script> 17 var myCom = Vue.extend({ 18 template: '<div>这是我的组件</div>' 19 }); 20 21 // Vue.component('my-com',myCom); 22 /*局部注册组件*/ 23 var app1 = new Vue({ 24 el: '#app1', 25 components:{ 26 'my-com':myCom 27 } 28 }); 29 30 var app2 = new Vue({ 31 el: '#app2' 32 }); 33 </script> 34 </body> 35 </html>
打开浏览器查看效果
可以看到只渲染了app1实例下的组件，app2实例虽然调用了该组件，但是因为这个组件没有在其内部注册，也没有全局注册，所以报错说找不到该组件。
一次注册，一处使用
4.3 template及script标签构建组件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue组件</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <div id="app1"> 10 <my-com></my-com> 11 <my-com1></my-com1> 12 </div> 13 14 <template id="myCom"> 15 <div>这是template标签构建的组件</div> 16 </template> 17 18 <script type="text/x-template" id="myCom1"> 19 <div>这是script标签构建的组件</div> 20 </script> 21 22 <script> 23 Vue.component('my-com1',{ 24 template: '#myCom1' 25 }); 26 27 var app1 = new Vue({ 28 el: '#app1', 29 components:{ 30 'my-com':{ 31 template: '#myCom' 32 } 33 } 34 }); 35 </script> 36 </body> 37 </html>
打开浏览器查看效果
异步组件
当项目比较大型，结构比较复杂时，我们一般选用vue-cli脚手架去构建项目。因为vue-cli集成了webpack环境，使用单文件组件，开发更简单，易上手，尤其是在对组件的处理上。对于原生vue.js，我们就得将组件构建在同一个html的script标签下或者html的外部js中，所有组件集中在一块，不容易管理，这也是原生vue,js的一点不便之处。
当然，在不使用脚手架的情况下想将一个个组件分别独立成一个个html文件，再去引用注册它们，也是可以实现的，但一般不推荐这样做。
vue.js可以将异步组件定义为一个工厂函数。
例子
新建一个head.html
1 <div> 2 这是头部 3 </div> 4 在index.html中异步引入head.html作为组件 5 6 <!DOCTYPE html> 7 <html lang="en"> 8 <head> 9 <meta charset="UTF-8"> 10 <title>vue组件</title> 11 <script src="js/vue.js"></script> 12 <script src="js/jquery.min.js"></script> 13 </head> 14 <body> 15 <div id="app1"> 16 <head-com></head-com> 17 </div> 18 <script> 19 Vue.component('head-com', function (resolve, reject) { 20 $.get("./head.html").then(function (res) { 21 resolve({ 22 template: res 23 }) 24 }); 25 }); 26 27 var app1 = new Vue({ 28 el: '#app1' 29 }); 30 31 </script> 32 </body> 33 </html>
当然要注意一点，使用$.get获取本地文件是会跨域的，所以我们要把项目部署到服务器环境中。
我这里用的是xampp集成环境，将项目文件夹component放置在xampp/htdocs下，然后访问localhost/component/index.html，
效果如下
可以看到在index.html中引入的head.html里的内容已经被添加进去