Блог

Я относительно новичок в vue.js и nuxt.js . Я пытаюсь установить и использовать внешнюю библиотеку javascript в моем nuxt.js проект. Я просто хочу протестировать эту функцию: https://christinecha.github.io/choreographer-js/examples/one.html

Библиотека: https://github.com/christinecha/choreographer-js

Я установил в своих зависимостях: npm install —save choreographer-js

Вот что я сделал до сих пор:

В папке плагинов choreographer.client.js

 const Choreographer = require('choreographer-js')
 

nuxt.config.js

 plugins: [{ src: '~/plugins/choreographer.client.js' }],
 

индекс.vue

 <template>
  <div class="container">
    <p>Animating based on scroll location.</p>
    <div id="box"></div>
  </div>
</template>

<script>
export default {
  let choreographer = new Choreographer({
  animations: [
    {
      range: [-1, 1000],
      selector: '#box',
      type: 'scale',
      style: 'opacity',
      from: 0,
      to: 1
    }
  ]
})

window.addEventListener('scroll', () => {
  choreographer.runAnimationsAt(window.pageYOffset)
})
}
</script>

<style>
p {
  position: fixed;
  top: 100px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: 'Arial', sans-serif;
  color: white;
  text-align: center;
  width: 100%;
  z-index: 1;
}

#box {
  margin: 0 0;
  width: 100%;
  height: 500vh;
  background: black;
  opacity: 0.2;
}
</style>

 

Терминал с сообщением об ошибке: Терминал-скриншот

Во-первых, вы экспортируете object ( export default { ... } ) со свойствами, а не тело функции. Таким образом, такие операторы, как let choreographer = ... синтаксически, не будут работать там. Вот что вызывает вашу ошибку.

Вместо этого запустите этот код в цепочке жизненного цикла Vue. Например:

 
<script>
export default {
  // this is shorthand for mounted: function mounted () {
  mounted () {
    let choreographer = new Choreographer({
      animations: [
        {
          range: [-1, 1000],
          selector: '#box',
          type: 'scale',
          style: 'opacity',
          from: 0,
          to: 1
        }
      ]
    })

    window.addEventListener('scroll', () => {
      choreographer.runAnimationsAt(window.pageYOffset)
    })
  }
}
</script>
 

Вторая проблема, о которой вы, несомненно, знаете, потому что вы создали плагин, который будет запускать только на стороне клиента ( ~/plugins/choreographer.client.js ), заключается в том, что вам нужно позаботиться только о запуске кода, предназначенного для браузера в браузере (что означало бы, что вы не можете предположить, что экземпляр choreographer определен нана стороне сервера).