最近在工作中写了一个PC端的Vue滚动组件。之前用过一些PC端的滚动组件，但是没有找到特别满意的，所以想把这个组件开源出来，希望能帮助到和我有类似需求的人！目标有开发模式，可以边测试边开发。组件构建完成后，可以发布到npm。该组件可以全局注册或本地使用。它具有演示功能。依赖github的pages功能，直接展示组件的使用效果。搭建基础模板，我们首先需要vue-cli为我们生成一个项目的初始模板。npminstall-g@vue/cli#ORyarnglobaladd@vue/clivueinitwebpack-simplecdproject-namenpminitgitinit跳过npminit和gitinit的过程修改目录，然后在src/目录下创建一个components目录，然后在components目录下构建你的组件，比如scrollbars.vue继续在src/下创建index.js这个js在构建模式下会被打包成一个入口js，如果要导出multiplecomponents对，export一个对象即可importScrollbarsfrom'./components/scrollbars.vue'Scrollbars.install=Vue=>Vue.component(Scrollbars.name,Scrollbars)exportdefaultScrollbars配置打包环境为了方便我们开发，需要配置webpack的打包配置。首先在package.json中添加一个脚本dmeo。这个命令的作用是为demo页面一键打包一个主js文件“demo”：“cross-envNODE_ENV=demowebpack--progress--hide-modules”接下来就是比较核心的webpack配置constNODE_ENV=process.env.NODE_ENV//为了方便不同模式下的路径配置，我们配置三个map对象来匹配特定的模式，减少复杂的判断//三种基本模式//1构建-生产用于打包核心组件代码，这个文件是别人导入的//2dev-development开发模式来调试你的组件//3demo-打包demo资源打出来的js是一个包含完整vue源码的constenteyMap={production:'./src/index.js'，开发：'./src/main.js'，演示：'./src/main.js'}constpathMap={生产：'./dist'，开发：'。/demo',demo:'./demo'}constpublicMap={production:'/dist/',development:'/demo/',demo:'/demo/'}module.exports={entry:enteyMap[NODE_ENV],//导入路径构建方式直接导入组件本身output:{path:path.resolve(__dirname,pathMap[NODE_ENV]),//输出路径publicPath:publicMap[NODE_ENV],//资源导入路径为了方便我们的demo打包开发模式和demo模式一样filename:'vue-scrollbars.js',//你的组件名library:'vue-scrollbars',//填入组件名即可，大家可以通过这个名字libraryTarget:'umd',umdNamedDefine:true}}用于开发由于我们修改了publicPath，所以需要修改index.html的js路径npmrunDev，开始开发吧，在app.vue中引入你的组件，想怎么调试就怎么开发创建demonpmrundemo打包完成后，可以尝试运行项目根目录下的http-server，查看是否成功demo可以正常运行。此时你可以Push到你的github仓库，并设置gh-pages为master分支，那个地址应该可以展示你的demo，别忘了放到readme里给大家看！记得在最终发布前在package.json中填写版本、关键字、描述、许可等信息，并写入README.md、LICENSE等文件。这将使其他人更好地理解和使用您的项目。.npmloginnpmpublish注意可能有重名。这个时候请用你账号的命名空间修改你的package.json"name":"@zhangzhengyi12/vue-scrollbars"别人导入的时候加上命名空间，留到最后私心推广一个最近写的scrolling组件，主要针对PC端。如果你有类似的需求，不妨看看[https://github.com/zhangzheng...]
