最近在工作中写了一个面向 PC 端的 Vue 滚动组件,关于 PC 端的滚动组件以前也用过一些,但是没有找到特别满意的,所以自己想着把这个组件开源发布出去,希望能够帮到和我有类似需求的人吧!

目标

  • 拥有 Dev 模式,能够边测试边开发组件
  • 构建完成后发布到 npm 上
  • 这个组件能够全局注册 也能够局部使用
  • 拥有 demo 能力 依靠于 github 的 pages 功能 直接展现该组件的使用效果

构建基本模版

首先我们需要 vue-cli 来为我们生成一个项目的初始模板。

npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue init webpack-simple <project-name>
cd project-name
npm init
git init

npm init 和 git init 的过程就略过了

修改目录

接下来在src/目录下创建一个 components 目录,随后在 components 目录下建立你的组件,比如scrollbars.vue

继续在src/下创建index.js 这个 js 将会在 build 模式下作为入口 js 进行打包,如果你要导出多个组件也是可以的,只要导出一个对象即可

import Scrollbars from './components/scrollbars.vue'

Scrollbars.install = Vue => Vue.component(Scrollbars.name, Scrollbars)

export default Scrollbars

配置打包环境

为了方便我们的开发,需要配置一下 webpack 的打包配置。

首先在 package.json 里增加一条脚本 dmeo 该命令的作用是一键打包出一个用于 demo 页面的主 js 文件

"demo": "cross-env NODE_ENV=demo webpack --progress --hide-modules"

接下来就是比较核心的 webpack 配置

const NODE_ENV = process.env.NODE_ENV

// 为了方便在不同模式下的路径配置,我们配置三个map对象来匹配具体的模式,减少复杂的判断
// 三种基本模式
// 1 build - production 用于打包核心组件代码 别人引入的就是这个文件
// 2 dev - development 开发模式 调试你的组件
// 3 demo - 打包demo资源 打出来的js是包含完整的vue源码的

const enteyMap = {
  production: './src/index.js',
  development: './src/main.js',
  demo: './src/main.js'
}

const pathMap = {
  production: './dist',
  development: './demo',
  demo: './demo'
}

const publicMap = {
  production: '/dist/',
  development: '/demo/',
  demo: '/demo/'
}

module.exports = {
  entry: enteyMap[NODE_ENV], // 引入路径 build模式下直接引入组件自身
  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 路径

<script src="./demo/vue-scrollbars.js"></script>
npm run dev

开始开发吧,尽情的在 app.vue 中引入你的组件并进行调试开发

创建 demo

npm run demo

打包完成后你可以尝试在工程根目录运行http-server来检查 demo 能否正常运行。

到这一步你可以 push 到你的 github 仓库,并把 gh-pages 设置成 master 分支,那个地址应该就能展示你的 demo 了,别忘了放到 readme 中让大家看看哦!

发布

npm login
npm publish

注意可能会出现重名情况,这时候请使用你账户的命名空间

修改你的 package.json "name": "@zhangzhengyi12/vue-scrollbars" 别人引入的时候也要加命名空间