AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-06-20 569
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 将自己编写的组件库发布到npm，后续其他项目可以更加方便地引入。

将自己开发的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 为 examples
  pages: {
    // 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 -300
                const 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库里查看了。

文章标签：
JavaScript
关键词：
组件库npm
VUE.js开发
VUE.js组件
npm vue
开发npm
JYeontu
目录
相关文章
光明顶阳顶天
|
2月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
154 64
mao29955
|
2月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
45 8
光明顶阳顶天
|
2月前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
63 2
html的七十二变
|
2月前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
69 5
html的七十二变
|
2月前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
57 4
游客zi3qmblbcdexu
|
2月前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
48 6
大树营养快线
|
2月前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
143 4
东方睿赢
|
3月前
|
JavaScript 前端开发 测试技术
组件化开发：创建可重用的Vue组件
【10月更文挑战第21天】组件化开发：创建可重用的Vue组件
东方睿赢
34 1
刘大猫.
|
3月前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense
《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense
刘大猫.
48 2
刘大猫.
|
3月前
|
Java
vue3知识点：Teleport组件
vue3知识点：Teleport组件
刘大猫.
37 1

热门文章

最新文章

  • 1
    npm install —— 从一个简单例子，看本地安装与全局安装的区别
  • 2
    [npm]使用(c)npm安装yarn
  • 3
    使用npm发布自己包（详细教程）
  • 4
    npm更换成cnpm---------cnpm的安装
  • 5
    vue npm run build打包报错：Class extends value undefined is not a constructor or null
  • 6
    NPM 使用介绍
  • 7
    npm 更新升级（最新版本 | 指定版本）
  • 8
    使用cnpm搭建企业内部私有NPM仓库
  • 9
    三巨头对决：深入了解pnpm、yarn与npm
  • 10
    Ubuntu20安装nodejs和npm并切换阿里源
  • 1
    使用Vue.js构建交互式前端的技术探索
    98
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    178
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    146
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    162
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    226
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    123
  • 7
    vue3中使用动态组件
    120
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    151
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    81
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    129

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境

    • 推荐镜像

    更多
  • NPM
  • composer
  • pypi
    • 下一篇
    开通oss服务