引入

你可以引入整个as-animation-ui，也可以根据需要仅引入部分动画组件。我们先介绍如何引入完整的as-animation-ui。

完整引入

在main.js文件下添加如下配置:

import Vue from 'vue';
import App from './App.vue';
import AsAnimationUI from "as-animation-ui";// 引用动画库
Vue.use(AsAnimationUI);//使用动画库
new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

如果你只希望引入部分动画,那么需要在 main.js 中写入以下内容:

import Vue from 'vue';
import App from './App.vue';
// 按需引入
import {
    AsBorderButton,
    AsFlyingBirds,
    AsFallingSnow,
    AsStrewFlowers,
    AsWaveCircleProgress,
    AsVariantWaveCircleProgress,
    AsTextShadow,
    AsProgressiveImage,
    AsParticle,
    AsTextExpand,
    AsParallaxScrolling,
    AsDynamicIon,
    AsGraphBoard,
    AsDrawBoard,
    AsDynamicCode,
    AsComplexParticle
} from 'as-animation-ui';
Vue.use(AsBorderButton);//边框按钮
Vue.use(AsFlyingBirds);//飞鸟图
Vue.use(AsFallingSnow);//雪落图
Vue.use(AsStrewFlowers);//散花图
Vue.use(AsWaveCircleProgress);//海浪进度条
Vue.use(AsVariantWaveCircleProgress);//升级版海浪进度条
Vue.use(AsTextShadow);//文字阴影
Vue.use(AsProgressiveImage);//渐进式图片
Vue.use(AsParticle);//宇宙微粒
Vue.use(AsTextExpand);//文字伸展
Vue.use(AsParallaxScrolling);//视差滚动
Vue.use(AsDynamicIon);//动态粒子
Vue.use(AsGraphBoard);//图形板
Vue.use(AsDrawBoard);//画板
Vue.use(AsDynamicCode);//动态代码
Vue.use(AsComplexParticle);//复杂粒子
new Vue({
  el: '#app',
  render: h => h(App)
});