前言
vue作爲一個輕量級前端框架，其核心就是組件化開發。我們一般常用的是用腳手架vue-cli來進行開發和管理，一個個組件即爲一個個vue頁面，這種叫單文件組件。我們在引用組件之時只需將組件頁面引入，再註冊即可使用。那麼不用腳手架，如何進行組件開發呢，本文先介紹一下基礎知識吧。
組件使用流程
1.組件構建
1.1 extend構建法
調用Vue.extend()方法，構建一個名字爲myCom的組件
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
})
其中template定義模板的標籤，模板的內容需寫在該標籤下
1.2 template標籤構建法
template標籤構建，需在標籤上加id屬性用以後期註冊
<template id="myCom">
<div>這是template標籤構建的組件</div>
</template>
1.3 script標籤構建法
script標籤同樣需加id屬性，同時還得加type="text/x-template"，加這個是爲了告訴瀏覽器不執行編譯裏面的代碼
<script type="text/x-template" id="myCom1">
<div>這是script標籤構建的組件</div>
</script>
2.註冊組件
（1）全局註冊：一次註冊，可在多個vue實例中使用，需調用Vue.component()方法，這個方法需傳2個參數，第一個參數爲組件名稱，第二個參數爲組件構造時定義的變量。
我們先用全局註冊註冊上面例子中創建的myCom組件
Vue.component('my-com',myCom)
還有一種不需構建直接註冊的寫法——註冊語法糖
Vue.component('my-com',{
'template':'<div>這是我的組件</div>'
})
'my-com'爲給組件自定義的名字，在使用時會用到，後面myCom對應的就是上面構建的組件變量。
注意命名規範，一般組件名字以短橫線分隔或一個小寫單詞。
例：footer-nav，footernav
如果是用template及script標籤構建的組件，第二個參數就改爲它們標籤上的id值
Vue.component('my-com',{
template: '#myCom'
})
（2）局部註冊：只能在註冊該組件的實例中使用
var app = new Vue({
el: '#app',
components: {
'my-com': myCom
}
})
註冊語法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '<div>這是我的組件</div>'
}
}
})
template及script構建的組件
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '#myCom'
}
}
})
3.調用組件
我們只需在需要調用組件的地方寫上組件名字的標籤即可
<div>
/*調用組件*/
<my-com></my-com>
</div>
4.例子
4.1 全局註冊
新建一個html文件，引入vue.js，並且定義2個vue實例app1和app2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
/*構建組件*/
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
/*全局註冊組件*/
Vue.component('my-com',myCom);
/*定義vue實例app1*/
var app1 = new Vue({
el: '#app1'
});
/*定義vue實例app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打開瀏覽器查看效果
可以看到全局註冊的組件在實例app1和實例app2中都可以被調用
一次註冊，多處使用
4.2 局部註冊
修改上面例子的html代碼，將全局註冊的組件改爲局部註冊，註冊到實例app1下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
var myCom = Vue.extend({
template: '<div>這是我的組件</div>'
});
// Vue.component('my-com',myCom);
/*局部註冊組件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
打開瀏覽器查看效果
可以看到只渲染了app1實例下的組件，app2實例雖然調用了該組件，但是因爲這個組件沒有在其內部註冊，也沒有全局註冊，所以報錯說找不到該組件。
一次註冊，一處使用
4.3 template及script標籤構建組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id="myCom">
<div>這是template標籤構建的組件</div>
</template>
<script type="text/x-template" id="myCom1">
<div>這是script標籤構建的組件</div>
</script>
<script>
Vue.component('my-com1',{
template: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom'
}
}
});
</script>
</body>
</html>
打開瀏覽器查看效果
異步組件
當項目比較大型，結構比較複雜時，我們一般選用vue-cli腳手架去構建項目。因爲vue-cli集成了webpack環境，使用單文件組件，開發更簡單，易上手，尤其是在對組件的處理上。對於原生vue.js，我們就得將組件構建在同一個html的script標籤下或者html的外部js中，所有組件集中在一塊，不容易管理，這也是原生vue,js的一點不便之處。
當然，在不使用腳手架的情況下想將一個個組件分別獨立成一個個html文件，再去引用註冊它們，也是可以實現的，但一般不推薦這樣做。
vue.js可以將異步組件定義爲一個工廠函數。
例子
新建一個head.html
<div>
這是頭部
</div>
在index.html中異步引入head.html作爲組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue組件</title>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
Vue.component('head-com', function (resolve, reject) {
$.get("./head.html").then(function (res) {
resolve({
template: res
})
});
});
var app1 = new Vue({
el: '#app1'
});
</script>
</body>
</html>
當然要注意一點，使用$.get獲取本地文件是會跨域的，所以我們要把項目部署到服務器環境中。
我這裏用的是xampp集成環境，將項目文件夾component放置在xampp/htdocs下，然後訪問localhost/component/index.html，
效果如下
可以看到在index.html中引入的head.html裏的內容已經被添加進去