详解基于vue-cli3快速发布一个fullpage组件

让我来为您详细讲解“详解基于vue-cli3快速发布一个fullpage组件”的完整攻略。本攻略主要分为以下几个部分：

1. 环境准备
2. 项目创建
3. fullpage组件编写
4. 项目打包与发布

下面我将通过两个示例，详细讲解完整的攻略过程。

环境准备

首先，您需要在本地安装node.js和vue-cli脚手架工具。具体可以参考node.js官网和vue-cli官网进行下载和安装。

项目创建

打开命令行工具，创建一个新的vue项目。进入指定的文件夹，执行以下命令：

vue create fullpage-component

在项目创建过程中，需要选择使用的vue版本、babel和eslint配置等，根据自己的需求进行选择即可。

fullpage组件编写

在项目中创建一个名为“FullPage”（完整代码可以在我的Github库上查看）的基于vue的组件。这个组件可以通过监听用户的滚动事件实现类似fullpage.js的效果，滚动条滚动时，页面会根据滚动方向自动滑动到下一屏。示例代码如下：

<template>
  <div class="fullpage">
    <div class="fullpage-section" v-for="(item, index) in sections" :key="index">
      <slot :name="'section-' + (index + 1)"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FullPage',
  props: {
    sections: {
      type: Array,
      required: true
    }
  },
  mounted() {
    let i = 0
    let startY = 0
    let endY = 0
    const length = this.sections.length
    const sectionHeight = 100 / length
    const fullpage = document.querySelector('.fullpage')

    fullpage.scrollTo({ top: 0 })

    document.addEventListener('touchstart', event => {
      startY = event.touches[0].clientY
    })

    document.addEventListener('touchend', event => {
      endY = event.changedTouches[0].clientY
      if (endY - startY > 50 && i > 0) {
        i--
      } else if (endY - startY < -50 && i < length - 1) {
        i++
      }
      fullpage.scrollTo({ top: i * sectionHeight + '%' })
    })
  }
}
</script>

<style scoped>
.fullpage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fullpage-section {
  height: 100vh;
}
</style>

这个fullpage组件中，我们使用了props传入sections，用于标记整个页面被分为多少屏，然后通过遍历sections数组，为每一屏添加相应的内容。同时，组件通过监听用户的touch事件，来自动滑动不同的屏幕。在使用的过程中，只需要引入这个FullPage组件，传入相应的sections数组即可。

项目打包与发布

在开发完成后，我们需要将组件打包成一个可以被引入的包，以供其他项目使用。执行以下命令：

npm run build

这条命令会将项目打包成js和css文件，并存放在dist目录下。

目前为止，我们的组件已经创建并打包完成。如果要发布到npm上，可以完成以下步骤：

1. 首先要在npm官网上注册一个账号。
2. 然后执行以下安装命令：

npm adduser

这条命令会提示输入npm账号和密码，输入正确后可以成功登录npm。
3. 接着执行以下命令可以将打包后的文件发布到npm上：

npm publish

如果发布成功，其他人就可以通过以下命令引入您的组件：

npm install fullpage-component

以上就是基于vue-cli3快速发布一个fullpage组件的完整攻略。通过这个攻略，您可以学习到如何创建和打包一个基于vue的组件，并发布到npm上供他人使用。