【Vue CLI】VueにアニメーションCSSライブラリAOSを導入したい

Vue CLIでパッケージ導入した場合、CSSライブラリをどのように入れればいいのかについてのメモです。

まずはターミナルに以下を入力

$ npm install --save aos@next

次にsrc/main.jsにてAOSをインポート

import AOS from 'aos'
import 'aos/dist/aos.css'

同じくmain.jsのnew Vueインスタンスの中に以下を追加

new Vue({
// ここから追加
  created () {
    AOS.init()
  },
//ここまで追加
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

後はAOSの指定通り、要素内に追加したアニメーションエフェクトを記入しましょう。