Создание скроллинга на весь экран с Vue.js и fullPage.js

Шаг 1: Установка Vue CLI

Если у вас еще не установлен Vue CLI, установите его с помощью npm:

npm install -g @vue/cli

Шаг 2: Создание нового проекта Vue

Создайте новый проект Vue с помощью Vue CLI:

vue create vue-fullpage-project

Перейдите в созданную директорию:

cd vue-fullpage-project

Шаг 3: Установка fullPage.js

Установите fullPage.js и его зависимости через npm:

npm install fullpage.js vue-fullpage.js --save

Шаг 4: Настройка проекта

1. Импортируйте fullPage.js в ваш проект. В main.js или main.ts (в зависимости от вашего проекта), импортируйте fullPage.js и его CSS:

   import Vue from 'vue';
   import App from './App.vue';
   import VueFullPage from 'vue-fullpage.js';
   import 'fullpage.js/dist/fullpage.css';

   Vue.config.productionTip = false;

   Vue.use(VueFullPage);

   new Vue({
     render: h => h(App),
   }).$mount('#app');

2. Создайте компоненты для ваших секций. Например, создайте компоненты Section1.vue, Section2.vue и т.д. src/components/Section1.vue

   <template>
     <div class="section">
       <h1>Section 1</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'Section1',
   };
   </script>

   <style scoped>
   .section {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background-color: #ff5f45;
     color: white;
   }
   </style>

Повторите этот шаг для других секций, изменяя содержимое и стили по необходимости.

3. Создайте основной компонент для отображения секций. src/components/FullPage.vue

   <template>
     <div id="fullpage">
       <section1 />
       <section2 />
       <!-- Добавьте другие секции здесь -->
     </div>
   </template>

   <script>
   import Section1 from './Section1.vue';
   import Section2 from './Section2.vue';

   export default {
     name: 'FullPage',
     components: {
       Section1,
       Section2,
       // Импортируйте другие секции здесь
     },
   };
   </script>

   <style>
   #fullpage {
     height: 100vh;
   }
   </style>

4. Используйте компонент FullPage в App.vue. src/App.vue

   <template>
     <div id="app">
       <FullPage />
     </div>
   </template>

   <script>
   import FullPage from './components/FullPage.vue';

   export default {
     name: 'App',
     components: {
       FullPage,
     },
   };
   </script>

   <style>
   #app {
     font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: center;
     color: #2c3e50;
     margin-top: 60px;
   }
   </style>

Шаг 5: Настройка fullPage.js

Полная настройка fullPage.js осуществляется с помощью объекта конфигурации. Вы можете передать его в компонент через атрибут options.

<template>
  <div id="fullpage" :options="fullpageOptions">
    <section1 />
    <section2 />
    <!-- Добавьте другие секции здесь -->
  </div>
</template>

<script>
import Section1 from './Section1.vue';
import Section2 from './Section2.vue';

export default {
  name: 'FullPage',
  components: {
    Section1,
    Section2,
    // Импортируйте другие секции здесь
  },
  data() {
    return {
      fullpageOptions: {
        // Опции fullPage.js
        licenseKey: 'YOUR_KEY_HERE',
        anchors: ['firstPage', 'secondPage'],
        navigation: true,
        navigationPosition: 'right',
        scrollingSpeed: 700,
        // Добавьте другие опции по необходимости
      },
    };
  },
};
</script>

<style>
#fullpage {
  height: 100vh;
}
</style>

Шаг 6: Запуск проекта

Теперь вы можете запустить проект:

npm run serve