一、pc端Element组件库
https://element.eleme.cn/#/zh-CN
（1）使用方法第一步在html头部引入element-ui样式
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
（2）引入element-ui组件库
注意:必须要先引入vue再引入第三方组件库
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
（3）接下来就选择自己想要的代码进行cv大法
12.png
二、pc端iview组件库
（1）在html头部引入view ui样式
<link rel="stylesheet" href="//unpkg.com/view-design/dist/styles/iview.css">
（2）引入view ui组件库
<script src="//unpkg.com/view-design/dist/iview.min.js"></script>
（3）注意：在非template/render模式下，需使用i-button
需要把大写的Button 改成i-button
<div id="app">
<Button type="success">Success</Button>
<i-button type="success">Success</i-button>
</div>
三、pc端Ant Design组件库
不支持在网页里直接使用，只支持工程化里开发，目前无法演示
https://www.antdv.com/docs/vue/introduce-cn/
四、开发移动端vant组件库
http://vant-contrib.gitee.io/vant/#/zh-CN/
（1）在头部导入vant样式
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css"
/>
（2）导入vant组件库
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
（3）接下里就是cv大法
<div id="app">
<van-button type="primary">主要按钮</van-button>
<van-cell-group>
<van-cell title="单元格" value="内容" />
<van-cell title="单元格" value="内容" label="描述信息" />
</van-cell-group>
<van-cell-group>
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
</van-cell-group>
</div>
五、看了这么多组件库，好奇组件库组件其中的原理吗？
接下来通过小案例看看tab栏是如何实现的
（1）整体结构是两个组件，父组件包裹子组件
<div id="app">
<b-tabs>
<b-tabs-item title="南京">南京的盐水鸭真好吃</b-tabs-item>
<b-tabs-item title="北京">北京的糖葫芦真好吃</b-tabs-item>
<b-tabs-item title="上海">上海的小笼包真好吃</b-tabs-item>
<b-tabs-item title="广州">广州的早茶真好吃</b-tabs-item>
</b-tabs>
</div>
vue部分，父子的组件传值
Vue.component('b-tabs-item',{
template:`
<li v-show="isShow">
<slot></slot>
</li> `,
props:['title'],
data() {
return {
isShow:false
}
},
created() {
this.$parent.titles.push(this.title)
},
})
Vue.component('b-tabs',{
template:`
<div class="box">
<ul class="title">
<li @click="activeIndex=index" :class="{active:activeIndex===index}" v-for="(item,index) in titles" :key="index">{{item}}</li>
</ul>
<ul class="content">
<slot></slot>
</ul>
</div> `,
data(){
return{
titles:[],
activeIndex:0
}
},
watch:{
activeIndex(val){
this.$children.forEach(r=>r.isShow=false)
this.$children[val].isShow=val
}
},
mounted() {
this.$children[this.activeIndex].isShow=true
},
})
new Vue({
el:'#app'
})
