.vue文件_Vue 单文件组件使用详解

正好在捣鼓如何注册和使用单文件组件，借此机会记录下来，以便下次查阅。

文档树:

现在想编写一个组件，能在App.vue中使用。

这是想做的效果图，最终想把这个抖动效果加在搜索图标上，

https://www.zhihu.com/video/1215235754760298496

Step 1: 构建单文件组件 IconRotor.vue

<template>
    <div class="bubble-wrapper">
    <div ref="bubble" class="bubble" @click="jumpOver()">
        <img class="bubble-image"
            src="./../assets/logo.png" />
    </div>
    </div>
</template>

<script>
import { TimelineLite, Back, Elastic, Expo } from "gsap"
  export default {
      name: 'IconRotor',
      data () {
        return {
        }
      },
      methods:{
          jumpOver(){
            const { bubble, bubblePulse } = this.$refs
            const timeline = new TimelineLite()
            timeline.to(bubble, 0.4, {
            scale: 0.8,
            rotation: 16,
            ease: Back.easeOut.config(1.7),
            })   
            timeline.to(
            bubblePulse,
            0.5, 
            {
                scale: 0.9,
                opacity: 1,
            },
            '-=0.6' 
            )
            
            timeline.to(bubble, 1.2, {
            scale: 1,
            rotation: '-=16',
            ease: Elastic.easeOut.config(2.5, 0.5),
            })
            timeline.to(
            bubblePulse,
            1.1,
            {
                scale: 3,
                opacity: 0,
                ease: Expo.easeOut,
            },
            '-=1.2'
            )
            }
        },
        mounted() {
            
        },
      components:{
      }
    }

</script>

<style>

.bubble {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
  background: #272727;
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.bubble-pulse {
  position: absolute;
  z-index: 1;
  height: 120px;
  width: 120px;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  background: #272727;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
}
.bubble-image {
  height: 50%;
}
</style>

Step 2，在App.vue中注册组件

• 首先要导入IconRotor

• 其次要在export 里命名component。这一步非常重要，你可以定制这一步，前面的key是你想使用的tag的名字，后面的value是你导入的组件的名字

Step 3 在App.vue的Template tag里就能用 iconrotor这个组件了。从效果图可以看到新的抖动Vue图标已经可以在页面上看到了。

下篇详解如何用Vue从svg + animation实现抖动效果。