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