vue2最适合vue-fullpage.js的哪个版本

vue2最适合vue-fullpage.js的哪个版本，我需要具体怎么在vue2-cli项目中使用呢？
有没有Da佬给个详细的具体步骤，我之前试了好多次都失败了，Gui 求

vue3


vue2，不过好像没得脚手架的
Search · vue-fullpage vue2 · GitHub GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 330 million projects. https://github.com/search?q=vue-fullpage+vue2

vue-fullpage.js 目前支持 Vue 2.x 版本，使用最新版本，最新版本是 v0.2.8
在 Vue 2.x 项目中使用 vue-fullpage.js，可以按照以下步骤：

  1. 安装 vue-fullpage.js
npm install vue-fullpage.js --save
  1. 在 main.js 中引入 vue-fullpage.js
import VueFullpage from 'vue-fullpage.js'

Vue.use(VueFullpage)
  1. 在组件中使用 vue-fullpage.js
<template>
  <div id="app">
    <fullpage>
      <div class="section">Section 1</div>
      <div class="section">Section 2</div>
      <div class="section">Section 3</div>
    </fullpage>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>
  • 你看下这篇博客吧, 应该有用👉 ：vue-fullpage使用时遇到的问题
  • 除此之外, 这篇博客: vue项目引入vue-fullpage为什么使用fullpage标签就报错等一系列问题中的 3.回顾问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 这次的项目是一个pc官网，它不像我以前做的一些简单的官网，只是把html、css、js、img等放在不同的文件夹下然后引入即可。这次是用vue框架并把整体的项目工程化了，可能第一次自己在vue项目中导入插件的缘故，踩了好多坑，让我感触颇深，让我对前端项目工程化有了个深刻的认识，考虑事情的角度也上了个维度。现在细想一下，其实也并不难，只是自己盲目在做的时候，有些因素没有考虑进去，导致最后自己把自己搞晕了，细细捋一遍后还是觉得很有意思，并且让我有很大的信心把之前做的官网也都改版一下。

    我主要使用在首页实现一个首屏滚动的效果，fullpage还是很好上手，我相信如果你有比我扎实的基础，那么大概率应该不会翻阅到我这篇博客，如果你认真的看了我的博客并还解决了你的问题，然后还看到了最后这段结尾，那么我只想说路还长每一次的绊脚石都会成为你积累的经验。
    最后我还想说一句↓

    未来总是充满希望！ 加油。

  • 以下回答由chatgpt基于相关博客总结生成:

    对于vue2-cli项目中使用vue-fullpage.js，应该使用vue-fullpage@0.0.10版本。具体步骤如下：

    1. 安装vue-fullpage@0.0.10版本
    npm install vue-fullpage@0.0.10 -S
    1. 在vue项目中引入vue-fullpage.js

    在main.js中添加以下代码：

    import VueFullPage from 'vue-fullpage.js'
Vue.use(VueFullPage)
    1. 在需要使用fullpage效果的页面中添加vue-fullpage标签
    <template>
  <div class="fullpage">
    <vue-fullpage>
      <page1></page1>
      <page2></page2>
      <page3></page3>
    </vue-fullpage>
  </div>
</template>

<script>
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
import Page3 from './Page3.vue'

export default {
  name: 'FullPage',
  components: {
    VueFullPage,
    Page1,
    Page2,
    Page3
  }
}
</script>

<style>
.fullpage {
  height: 100%; /*设置高度为100%*/
}
</style>
    1. 在引入vue-fullpage.js之前，还需要在webpack配置文件中配置jquery和fullpage的引用。在webpack.base.conf.js中添加以下代码：
    const webpack = require('webpack')
const path = require('path')

module.exports = {
  // ...省略其他配置...
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../src'),
      'jquery': 'jquery/dist/jquery.min.js',
      'fullpage': '@fullpage/fullpage.js/jquery.fullpage.min.js'
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
}

    请注意，上面的别名路径可能需要根据你的项目结构做出相应的调整。另外，也需要确保安装了jquery和fullpage相关的依赖。

    以上四个步骤应该可以正确地使用vue-fullpage.js。如果还有问题，请提供具体的错误信息和相关代码进行进一步排查。

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

Vue2最适合vue-fullpage.js的版本是1.0.0版本。

要使用vue-fullpage.js，您需要在Vue2-CLI项目中安装它。

以下是在Vue2-CLI项目中使用vue-fullpage.js 1.0.0版本的步骤：

在项目中安装vue-fullpage.js：npm install vue-fullpagejs --save
在Vue组件中导入和注册vue-fullpage.js：

import VueFullpage from 'vue-fullpagejs'  
export default {  
  name: 'MyComponent',  
  components: {  
    VueFullpage  
  },  
  data () {  
    return {  
      fullpage: {  
        sections: [  
          {  
            position: '1',  
            background: '#000',  
            height: '100%',  
            overflow: 'hidden'  
          },  
          {  
            position: '2',  
            background: '#fff',  
            height: '100%',  
            overflow: 'hidden'  
          }  
        ]  
      }  
    }  
  }  
}

在模板中使用vue-fullpage.js：

<template>  
  <div>  
    <vue-fullpage>  
      <div v-for="section in fullpage.sections" :key="section.position">  
        <div v-if="section.position === '1'">Section 1</div>  
        <div v-else>Section 2</div>  
      </div>  
    </vue-fullpage>  
  </div>  
</template>

启动项目并查看效果：npm run serve