Vue发开常用组件库

一、pc端Element组件库

https://element.eleme.cn/#/zh-CN

（1）使用方法第一步在html头部引入element-ui样式

（2）引入element-ui组件库

注意:必须要先引入vue再引入第三方组件库

（3）接下来就选择自己想要的代码进行cv大法

12.png

二、pc端iview组件库

http://v1.iviewui.com/

（1）在html头部引入view ui样式

（2）引入view ui组件库

（3）注意：在非template/render模式下，需使用i-button

需要把大写的Button 改成i-button

  

         Success 
        Success
    

三、pc端Ant Design组件库

不支持在网页里直接使用，只支持工程化里开发，目前无法演示
https://www.antdv.com/docs/vue/introduce-cn/

四、开发移动端vant组件库

http://vant-contrib.gitee.io/vant/#/zh-CN/

（1）在头部导入vant样式

（2）导入vant组件库

（3）接下里就是cv大法

  

        主要按钮
        
            
            
           
          
            
          
    

五、看了这么多组件库，好奇组件库组件其中的原理吗？

接下来通过小案例看看tab栏是如何实现的

（1）整体结构是两个组件，父组件包裹子组件

    


    南京的盐水鸭真好吃
    北京的糖葫芦真好吃
    上海的小笼包真好吃
    广州的早茶真好吃

    

vue部分，父子的组件传值

   Vue.component('b-tabs-item',{
             template:`
             

                
                
 `,
             props:['title'],
             data() {
                 return {
                     isShow:false
                 }
             },
             created() {
                 this.$parent.titles.push(this.title)
             },
         })
         Vue.component('b-tabs',{
             template:`
             

     

         
{{item}}
     
     

         
     
 
 `,
             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'
         })