将自己开发的vue组件库发布到npm

安装vue环境

已有的可以跳过

npm i vue -g
npm i vue-cli -g

创建一个vue项目

vue create .

文件目录如下图：

调整目录

1、packages

增加一个packages目录，用来存放我们的组件模块

2、examples

修改原来的src目录为examples，用于运行展示代码

文件调整

1、vue.config.js

修改项目入口

const path = require('path')
function resolve(dir) {return path.join(__dirname, dir)
}
module.exports = {// 修改 src 为 examplespages: {// lintOnSave: false,index: {entry: "examples/main.js",template: "public/index.html",filename: "index.html"}},// 组件样式内联css: {extract: false},// 扩展 webpack 配置，使 packages 加入编译chainWebpack: config => {config.resolve.alias.set('@', resolve('examples')).set('~', resolve('packages'))}
};

将组件代码放到packages目录中

完整组件目录如下

红圈为一个组件的完整目录，每一个组件都应该有这样的目录

这里以一个手写画板组件为例来给大家展示一下

canvasBroad.vue

<template><div id="canvas-broad"><canvas id="canvas" :width="width" :height="height">浏览器不支持canvas<!-- 如果不支持会显示这段文字 --></canvas><j-tab-bar v-if="toolsTabList":tabList="tabList":showTab="showTab"><template v-slot:back-ground-color><div class="section"><span class="info">设置背景颜色：</span><input class="btn input-color" type="color" v-model="brackGroudColor" /></div></template><template v-slot:pen-color><div class="section"><span class="info">选择画笔颜色：</span><input class="btn input-color" type="color" v-model="penColor" /></div></template><template v-slot:eraser><div class="section"><span class="info">选择橡皮擦：</span><button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button></div><div class="section"><button class="btn" @click="setBackGround()">清空画布</button></div></template><template v-slot:pen-size><div class="section"><span class="info">选择画笔大小：</span><progress :value="progressValue" style="cursor: pointer;"id="progress"max="1" :title="progressValue * 100 +'%'"@click="setPenWidth"></progress><span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span></div></template><template v-slot:export><div class="section"><span class="info">输出画板内容到下面的图片：</span><button class="btn" @click="createImage();">EXPORT</button></div><img id="image_png"></template></j-tab-bar><template v-if="!toolsTabList"><div class="section"><button class="btn" @click="setBackGround()">清空画布</button></div><div class="section"><span class="info">选择画笔颜色：</span><input class="input-color" type="color" v-model="penColor" /></div><div class="section"><span class="info">设置背景颜色：</span><input class="input-color" type="color" v-model="brackGroudColor" /></div><div class="section"><span class="info">选择橡皮擦：</span><button class="btn colorBtn" :style="'background-color:' + brackGroudColor + ';'" @click='setPenColor();'>{{brackGroudColor}}</button></div><div class="section"><span class="info">选择画笔大小：</span><progress :value="progressValue" style="cursor: pointer;"id="progress"max="1" :title="progressValue * 100 +'%'"@click="setPenWidth"></progress><span style="margin-left: 0.3125rem;">{{20 * progressValue}}px</span></div><div class="section"><span class="info">输出画板内容到下面的图片：</span><button class="btn" @click="createImage();">EXPORT</button></div><img id="image_png"></template></div>
</template><script>import JTabBar from '../../pagesTools/JTabBar.vue';export default{name:'canvasBroad',props:{height:{type:Number,default:-1},width:{type:Number,default:-1},defaultPenColor:{type:String,default:'#000000'},defaultPenSize:{type:Number,default:4},defaultBackGroundColor:{type:String,default:"#ffffff"},toolsTabList:{type:Boolean,default:false}},components:{JTabBar},watch:{brackGroudColor:{handler(newVal,oldVal){this.setBackGround();}}},data() {return{penColor:"#000000",penWidth:4,penClick:false,startAxisX:0,startAxisY:0,brackGroudColor:"#ffffff",progressValue:0.2,tabList:[{label:'背景颜色',id:'back-ground-color'},{label:'画笔颜色',id:'pen-color'},{label:'橡皮擦',id:'eraser'},{label:'画笔大小',id:'pen-size'},{label:'导出图片',id:'export'}],showTab:0}},created(){},mounted() {this.init();},methods:{//页面初始化init(){let height = this.height;let width = this.width;if(width == -1){const cbw = document.getElementById('canvas-broad');width = cbw.offsetWidth * 0.9;height = cbw.offsetHeight * 0.6;this.width = width;this.height = height;}this.penColor = this.defaultPenColor;this.brackGroudColor = this.defaultBackGroundColor;this.penWidth = this.defaultPenSize;let canvas = document.getElementById('canvas'); //获取canvas标签let ctx = canvas.getContext("2d");//创建 context 对象ctx.fillStyle = this.brackGroudColor;//画布背景色ctx.fillRect(0,0,width,height);//在画布上绘制 width * height 的矩形，从左上角开始 (0,0)canvas.addEventListener("mousemove",this.drawing); //鼠标移动事件canvas.addEventListener("mousedown",this.penDown); //鼠标按下事件canvas.addEventListener("mouseup",this.penUp); //鼠标弹起事件},getWidthSelect(width){if(width == this.penWidth){return "btn bg penBtn fw"}return "btn bg penBtn"},getColorSelect(color){if(color == this.penColor){return 'btn colorBtn fw'}return 'btn colorBtn';},setBackGround(){const canvas = document.getElementById('canvas'); //获取canvas标签const ctx = canvas.getContext("2d");//创建 context 对象ctx.fillStyle = this.brackGroudColor;//画布背景色ctx.fillRect(0,0,this.width,this.height);//在画布上绘制 600x300 的矩形，从左上角开始 (0,0)},setPenWidth(event){const progress = document.getElementById('progress');this.progressValue = (event.pageX - progress.offsetLeft) / progress.offsetWidth;this.penWidth = 20 * this.progressValue;},//设置画笔颜色setPenColor(color = ''){if(color == '') this.penColor = this.brackGroudColor;else this.penColor = color;},penDown(event){this.penClick = true;this.startAxisX = event.pageX;this.startAxisY = event.pageY;},penUp(){this.penClick = false;},drawing(event){if(!this.penClick) return;const canvas = document.getElementById('canvas'); //获取canvas标签const ctx = canvas.getContext("2d");//创建 contextconst canvas = document.getElementById('canvas');  对象const stopAxisX = event.pageX;const stopAxisY = event.pageY;const left = document.getElementById('leftMenu');const lw = left && left.offsetWidth ? (left.offsetWidth || 0) / 2 : 0;ctx.beginPath();//由于整体设置了水平居中，因此需要做特殊处理：window.screen.availWidth/2 -300const wsaW = window.screen.availWidth;const cl = canvas.offsetLeft;const ct = canvas.offsetTop;ctx.moveTo(this.startAxisX-cl,this.startAxisY - ct);//moveTo(x,y) 定义线条开始坐标ctx.lineTo(stopAxisX-cl,stopAxisY - ct );//lineTo(x,y) 定义线条结束坐标ctx.strokeStyle = this.penColor;ctx.lineWidth = this.penWidth;ctx.lineCap = "round";ctx.stroke();// stroke() 方法来绘制线条this.startAxisX = stopAxisX;this.startAxisY = stopAxisY;},createImage() {console.log('-------');const canvas = document.getElementById('canvas'); //获取canvas标签const img_png_src = canvas.toDataURL("image/png"); //将画板保存为图片格式的函数// console.log('=====',img_png_src);//data:image/png;base64,iVBOR.....document.getElementById("image_png").src = img_png_src;}}}
</script><style lang="scss" scoped="scoped">*{margin: 0;padding: 0;}#canvas-broad{margin: 0 auto;/*text-align: center;*/}#canvas{border: 2px solid #ff6700;cursor:crosshair;/*不能用这种方式给canvas设置宽高*//*width: 600px;*//*height: 300px;*/}.btn{width:70px;height: 40px;border-radius: 10px;border: 1px solid #aaa;/*去掉<button>默认边框*/outline:none;/*去掉<button>选中时的默认边框*/cursor: pointer;}.input-color{width:70px;height: 40px;border-radius: 10px;border: 0;/*去掉<button>默认边框*/outline:none;/*去掉<button>选中时的默认边框*/}#image_png{width: 300px;height: 150px;border:  2px solid #ff6700;display: block;margin: 10px auto;}.section{margin-top: 10px;}.info{color: #f0f;font-size: 14px;line-height: 40px;}.bg{background: #ff6700;}.fw{font-weight: 700;}
</style>

canvasBroad/index.js

import canvasBroad from './src/canvasBroad.vue';canvasBroad.install = Vue => Vue.component(canvasBroad.name, canvasBroad);//注册组件export default canvasBroad

packages/index.js

import canvasBroad from './canvasBroad' // 存储组件列表
const components = [canvasBroad
]// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {// 判断是否安装
if (install.installed) return// 遍历注册全局组件components.map(component => Vue.component(component.name, component))
}// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {install(window.Vue)
}export default {// 导出的对象必须具有 install，才能被 Vue.use() 方法安装install,// 以下是具体的组件列表...components
}

测试组件

main.js引入组件

import jvuewhell from './../packages/index'
// 注册组件库
Vue.use(jvuewhell)

在App.vue中使用组件

<canvasBroad :toolsTabList="true"></canvasBroad>

上传到npm

测试通过了之后也就到了最后的一步，将我们的组件上传到npm库上去。

package.json

加上：“lib”: “vue-cli-service build --target lib --name jvuewhell --dest lib packages/index.js”

填写好基本信息

  "name": "@jyeontu/jvuewhell","version": "0.1.0","author": "JYeontu","license": "MIT","description":"vue组件库封装","main": "lib/jvuewhell.umd.min.js","keyword": "vue components",
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","lib": "vue-cli-service build --target lib --name jvuewhell --dest lib packages/index.js"},

打包

npm run lib

设置.npmignore，只上传我们需要的文件

examples/
packages/
public/

登录npm

在cmd中输入命令 npm login（注意不要使用其他源）

npm login

需要先注册账号，没有的可以先去官网注册

npm官网

发布

npm publish

因为我的name为’@jyeontu/jvuewhell’，所以需要使用下面命令

npm publish --access public

发布成功之后就可以上自己的npm库里查看了。

将自己开发的vue组件库发布到npm相关推荐

vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
使用cdn和npm引入的区别_在npm上发布自己的vue组件库（使用npm install 或者 CDN的方式引用）...
一.npm publish 发布包到npm库的命令是npm publish npm publish发布包,需要先配置webpack.json文件,如果没有webpack.json文件,可以通过npm ...
前端架构之路：数据驱动型组件-HeyUI，一个新型的VUE组件库
什么是数据驱动型组件? 其实,目前来说,也只有HEYUI组件库是这种方式的尝试者,这也是我在设计组件库的过程中,慢慢思考的成果. 所以,关于这一种定义,还没有人运用过. 当然,这也是HEYUI区别于其 ...
【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
所谓UI组件库,就是封装了平常项目开发中经常会使用的页面组件,发布至npm库中作为插件供项目组成员及其他开发者使用(不发布也行),目的就是为了避免多次重复劳动. 以插件的形式使用可以做到即插即用,非常 ...
不厌其烦，又一个Vue组件库
Github仓库地址: github.com/ms-design/m- 文档和Demo网站: ms-design.github.io MS Design 基于微软 Fluent Design 设计的 ...
webpack构建自定义vue组件库
本文用于描述用webpack构建vue组件库的过程前提:安装node 一.创建目录w-components,自己可以随便命名二.进入目录执行npm init初始化项目三.安装webpack和we ...
京东Vue组件库NutUI 2.0发布：将支持跨平台！
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
Vant 1.0 发布：轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件)
自己写的组件有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合 ...
使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦
移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...

将自己开发的vue组件库发布到npm

将自己开发的vue组件库发布到npm

安装vue环境

创建一个vue项目

调整目录

1、packages

2、examples

文件调整

1、vue.config.js

将组件代码放到packages目录中

canvasBroad.vue

canvasBroad/index.js

packages/index.js

测试组件

main.js引入组件

在App.vue中使用组件

上传到npm

package.json

打包

登录npm

发布

将自己开发的vue组件库发布到npm相关推荐

最新文章

热门文章