Vue发开常用组件库

一、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组件库

http://v1.iviewui.com/

（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'
         })