vue引用cube-ui步骤

创建vue项目框架方式
vue cli2： vue init cube-ui/cube-template projectname(此为项目名称)
vue cli3:vue create projectname(此为项目名称)

1. 在终端输入vue add cube-ui
2. 依照下图输入
   即可
   3.可以在package.json中dependencies查看下载是否成功
   ui官网点击进入

4.使用组件，例如引用TabBar组件
在Components新建一个CommonFooter.vue，快捷键<>enter回车搭建结构，其中代码如下

<template>
  <div class="tab">
    <cube-tab-bar
      v-model="selectedLabelSlots"
      show-slider
      inline
      @click="changeHandler"
    >
      <cube-tab
        v-for="item in tabs"
        :icon="item.icon"
        :label="item.label"
        :key="item.path"
        :value="item.path"
      >
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script>
export default {
    data () {
    return {
      selectedLabelSlots: '/',
      tabs: [{
        label: '首页',
        icon: 'cubeic-home',
        path:"/"
      }, {
        label: '朋友圈', //order
        icon: 'cubeic-like',
        path:"/order"
      }, {
        label: 'PK',
        icon: 'cubeic-game',
        path:"data"
      }, {
        label: '个人中心',
        icon: 'cubeic-person',
        path:"/personal"
      }]
    };
    },
    methods:{
        changeHandler(path){
            if(path !==this.$router.path){
                this.$router.push(path)
            }

        }
    },
    created(){
        //默认路由选择器，比如刷新页面，需要重新进入到当前路由
        this.selectedLabelSlots = this.$router.path
    }


};
</script>

<!--SCSS是⼀种CSS预处理语⾔, scoped 是指这个scss样式 只作⽤于当前组件-->
<style lang="scss" scoped>
.tab {
 position: fixed;
 bottom: 0;
 z-index: 999;
 background-color:#fff;
 width: 100%;
 border-top: 1px solid rgba($color: #000000, $alpha: 0.1);
}
.cube-tab_active {
 color: #3bb149;
}
</style>

5.然后在Home中script引用，代码如下

<template>
  <common-footer></common-footer>
</template>


<script>

import CommonFooter from '../../components/CommonFooter'
export default {
    //注册组件
    components:{
        HomeBanner,
        VideoList,
        CommonFooter
    }

}
</script>

路由vue-router知识点普及

1.router.path 获取当前的路由

2.router.go(n) 这个⽅法的参数是⼀个整数，表示在 history 记录中向前或者后退多少步，类似 window.history.go(n)⽅法

3.router.push(path) 跳转到不同的path路径，这个⽅法会向 history栈添加⼀个新的记录，所以当⽤户点击浏览器后退按钮时，则回到之前的 URL。

生命周期其中用到的两个解释

1. vue实例⽣命周期 created：在模板渲染成html前调⽤，即通常初始化某些属性值，然后再渲染成视图
2. vue实例⽣命周期 mounted：在模板渲染成html后调⽤，通常是初始化⻚⾯完成后，再对html的dom

样式圆形边缘：

box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);