webpack构建自定义vue组件库

本文用于描述用webpack构建vue组件库的过程

前提：安装node

一、创建目录w-components，自己可以随便命名
二、进入目录执行npm init初始化项目
三、安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev

四、安装vue等其他依赖包,详见package.json
五、创建webpack配置文件webpack.config.js,并添加配置内容
六、创建src目录，并创建components子目录
七、components中存放vue单文件组件
八、在src目录下创建main.js

import SdcCanvas from 'comp/SdcCanvas'
import SdcCanvasBlock from 'comp/SdcCanvasBlock'

const components = [SdcCanvas, SdcCanvasBlock]

const install = function (Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  SdcCanvas,
  SdcCanvasBlock
}

九、构建

npm run build //生成dist/w-ui.js库文件
npm run demo //生成dist/demo示例代码

十、将组件库发布到npm

npm login //登录，要先注册npm账户，如果设置了镜像仓库，登录前需要将npm仓库设回原仓库
npm publish //发布成功后，可设回镜像
npm unpublish [<@scope>/]<pkg>[@<version>] //移除24小时内发布的包
npm deprecate <pkg>[@<version>] <message> //将木版本的包设为过期

十一、源码github