webpack构建自定义vue组件库

webpack构建自定义vue组件库本文描述jsplumb.js库的vue组件化过程一、步骤创建vue项目,vuecreatew-vue-jsplumb引入jsplumb,编写组件测试npm发布(编写自动发布脚本)二、错误1.执行vuecreatew-vue-jsplumb产生的错误:MSBUILD:errorMSB3428:未能加载VisualC++组件“VCBuild.exe”。…

本文用于描述用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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10544.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注