自定义vue组件发布到npm的方法

本文介绍了自定义vue组件发布到npm的方法，分享给大家，具体如下：

为什么会有这个想法呢，主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候，总是要在项目分支中修改，然后同步到主线上，这样容易导致分支修改后没有同步到主线，慢慢的就会导致组件版本不统一，而导致升级组件很繁琐，最后可能都要去维护多个组件的不同版本，这样不是我们想要的。

所以就打算将组件打包发布到npm上，每个项目中只需要在package.json中修改组件版本即可同步最新版本。

组件发布历程

1、开始对打包不是很了解，只是简单的将原有.vue文件以及相关的css、image资源进行提取，然后放到一个项目下，下面是发布组件到npm的详细步骤：

（1）新建组件项目，通过npm init来初始化一个package.json文件
（2）将提取出来的组件放到项目路径。
（3）在package.json所在目录，执行npm adduser。这里需要注册npm帐号
（4）然后要求输入用户名、密码、注册时填的邮箱。如图：

（5）然后输入npm publish即可。

如果不出以外，组件就已经发布成功了，可以通过npm install xxxx来进行安装了。

2、在使用过程中发现了一些小问题。由于当时在index.js中使用了es6的部分语法（如：数组的map、const），导致在低版本ie中会报错，虽然可以通过修改js来解决。但是作为一个有理想有抱负的码农，这种事情不能忍，因为想element-ui这些组件都是可以将.vue文件打包之后发布的。然后就想着也要弄好了。

3、然后就开始研究怎么能通过import xx from xxx即可实现加载打包后的js。通过查找资料，发现是通过package.json中有个main属性来设置加载js的路径。如图：

4、加载问题解决了，剩下就是打包问题了。由于打包需要一些webpack的配置，所以直接用vue-cli初始化了一个工程，对其中的webpack进行调整。主要是去掉build中打包配置文件webpack.prod.conf.js，这里去掉HtmlWebpackPlugin等。

https://github.com/myGitZone/mapModule 这里是示例，该项目只是一个demo。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue组件发布到npm简单步骤

    vue组件发布到npm简单步骤

    1.0 新建项目 1.1 初始化项目 输入npm init,之后需要填什么就写什么 新建src目录,并在src目录下新建alert.vue $ npm init $ mkdir src $ cd src $ touch alert.vue 最后的目录结构 1.2 修改入口文件 打开package.json,并修改 1.3 写组件内容 这个组件内容可以随便写,我们就先测试一下,我是这样写的 <template> <div class="alert"> <di

  • vue todo-list组件发布到npm上的方法

    前言 最近几个人合作完成了一个项目,发现有一些公用的基础业务组件,可以提取出来,不仅方便大家在各自模块直接引用,也可以在以后的项目中使用.想到了可不可以自己动手把组件打包发布到内部的npm上,避免以后小伙伴们的重复工作呢?于是乎,说干就干,在这里操练一下,写个todo-list的vue组件案例.案例源码:https://github.com/wuwhs/todoList 建立npm项目 1. 初始化npm项目 建一个文件夹(todoList),在这个文件夹路径下打开cmd窗口,输入指令npm i

  • 使用命令行工具npm新创建一个vue项目的方法

    Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程. 只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构建配置的项目: # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project $ vue init webpack test //输入命令 ? Project

  • 用vue封装插件并发布到npm的方法步骤

    用vue封装插件并发布到npm的方法步骤

    一.基于vue的国家区号列表 vue-flag-list包含了大部分国家的区号,点击右边的三角形展开列表可以选择国家区号,若列表中没有区号,也可以自己输入区号. 全球区号列表 1.1 初始化组件 用的是vue-cli来初始化组件,虽然有很多东西不需要,因为对这个比较熟悉,所以还是按照这个步骤来. vue init webpack vue-flag-list cd vue-flag-list cnpm install npm run dev 1.2 根据自己的需求,实现具体功能,我的主要功能写在v

  • vue封装第三方插件并发布到npm的方法

    vue封装第三方插件并发布到npm的方法

    前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装,主要提供思路,封装方法大同小异·,文章略长要有耐心. gitment gitment是一个基于github issues封装的评论插件,以这个插件作为演示,把它封装成vue插件.vue-gitment,该插件已发布到npm,并在自己的开源项目vueblog中安装使用 项目初始化 封装vue的插件用

  • 通过npm引用的vue组件使用详解

    通过npm引用的vue组件使用详解

    什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 如何注册组件? 需要使用Vue.extend方法创建一个组件,然后使用Vue.component方法注册组件.Vue.extend方法格式如下: var MyComponent = Vue.extend({ // 选项...后面再介绍 }) 如果想要其他地方使用这个创

  • 基于Vue的文字跑马灯组件(npm 组件包)

    基于Vue的文字跑马灯组件(npm 组件包)

    一.前言 总结下最近工作上在移动端实现的一个跑马灯效果,最终效果如下: 印象中好像HTML标签的'marquee'的直接可以实现这个效果,不过 HTML标准中已经废弃了'marquee'标签 既然HTML标准已经废弃了这个标签,现在工作上用的是Vue,所以想着能不能自己也发布一个基于Vue的文字跑马灯组件包,这样别人可以通过npm install ...就可以用,想想还有点激动,于是开始我的第一个npm组件之旅! 二.用npm发布一个包 有点惭愧,之前通过npm install ...安装pac

  • Vue组件库发布到npm详解

    制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm install 目录结构 - vue-flag-list + build + dist // 存放发布到npm的代码 - src - components // 存放组件源代码 和 README.

  • vue2.0+ 从插件开发到npm发布的示例代码

    vue: V2.5.11 此篇尽量详细,清楚的讲解vue插件的开发到npm的发布,想想将你自己做的东西展示给广大"网民",心里还是有点小激动的...-^_^ 先上一下插件效果图------github传送门 下面我们就来说说详细做法: 1. 初始化项目 vue init webpack-simple vue-pay-keyboard 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容 整理完后项目目录 2.编写插件 vue

  • 自定义vue组件发布到npm的方法

    自定义vue组件发布到npm的方法

    本文介绍了自定义vue组件发布到npm的方法,分享给大家,具体如下: 为什么会有这个想法呢,主要是vue项目中自定义的组件在多个项目中使用.导致修改bug的时候,总是要在项目分支中修改,然后同步到主线上,这样容易导致分支修改后没有同步到主线,慢慢的就会导致组件版本不统一,而导致升级组件很繁琐,最后可能都要去维护多个组件的不同版本,这样不是我们想要的. 所以就打算将组件打包发布到npm上,每个项目中只需要在package.json中修改组件版本即可同步最新版本. 组件发布历程 1.开始对打包不是很

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

  • vue实现自定义公共组件及提取公共的方法

    vue实现自定义公共组件及提取公共的方法

    目录 自定义公共组件及提取公共的方法 vue自定义公共组件 vue 提取公共的方法 vue定义公用方法 自定义公共组件及提取公共的方法 vue自定义公共组件 我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单 我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种: 在src/components目录创建目录 common, 再创建header.vue header.vue <template>   <div>   <h1>header in here

  • vue组件之间的数据传递方法详解

    (1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o

  • 在Vue组件中使用 TypeScript的方法

    注意:此文并不是把vue改为全部替换为ts,而是可以在原来的项目中植入ts文件,目前只是实践阶段,向ts转化过程中的过渡. ts有什么用? 类型检查.直接编译到原生js.引入新的语法糖 为什么用ts? TypeScript的设计目的应该是解决JavaScript的"痛点":弱类型和没有命名空间,导致很难模块化,不适合开发大型程序.另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程. typescript不仅可以约束我们的编码习惯,还能起到注释的作用,当我们看到一函数后我们立马

  • 在vue组件中使用axios的方法

    现在我们通过webpack+vue-cli搭建起了一个vue项目的框架,如果我们需要在vue组件中使用axios向后台获取数据应该怎么办呢? 通常情况下,我们搭建好的项目目录应该是这样子的 首先需要安装axios,这个会npm的都知道 下一步,在main.js中引入axios import axios from "axios"; 与很多第三方模块不同的是,axios不能使用use方法,转而应该进行如下操作 Vue.prototype.$axios = axios; 接着,我们就可以在A

  • vue组件中的数据传递方法

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递.组件之间传递数据大致分为三种情况: 父组件向子组件传递数据,通过 props 传递数据. 子组件向父组件传递数据,通过 events 传递数据. 两个同级组件之间传递数据,通过 event bus 传递数据. 一.父组件向子组件传递数据 子组件部分: <template> <div class="child"> {{ msg }} </

随机推荐