全国咨询热线:18720358503

巢湖微信小程序_自界说vue组件发布到npm的方法

类别:行业新闻 发布时间:2021-01-08 浏览人次:

自定义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等。

这里是示例,该项目只是一个demo。

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


推荐阅读

聊城市网站建设难-酒店型的网站该如何做?酒店

新建设酒店餐厅网站时大家要充足考虑到“酒店餐厅”的运营服务特点 因而大家在制作计划方案时候重视系统软件的好用性 靠谱性 优秀性和经济发展性标准 此外还会继续留意系统软件...

2021-01-15
网站建站公司-规范而标准的流程是保证企业网站

创建一个网站并不是一件简易的事儿。尽管一些企业如今投放广告说她们只花好几百元就可以建一个网站,可是在它的身后有许多掩藏的难题。数100元的网站并不是自身设计方案的,但...

2021-01-15
企业商城建站套餐-一个阿里云域名站应当如何建

制作一个网站是非常容易的,而想要运营好一个网站就非常难。建站行业发展迅速,近几年出现了很多建站公司,而成功发展下来的又有多少呢?在一开始都是模仿,然后不断创新,慢...

2021-01-14
网页模板图片-万象云模板自助建站系统系统201

微信小程序1.增加查寻作用应用情景:公司会出现一些和本身业务流程有关的数据信息,必须给到顾客出示“查寻信息内容”或“查寻交费”服务。1)查寻信息内容:院校、学习培训组...

2021-01-14
广州凡科互联网科技股份有限公司招聘电商网络

招聘人数:23职位信息如果你拥有强大的企图心和追求理想的韧性来吧,这里,给你的不仅是一份养家糊口的工作,而是一份事业!这里,你不仅仅是一个普通的销售,而是一个想要成功...

2021-01-13
广州凡科互联网科技股份有限公司招聘财务出纳

招聘人数:7职位信息岗位职责:1、日常现金、银行、票据的收、支结算;2、登记现金、银行日记账,对各类票据做好备查登记;3、每日核对现金、银行余额,编制资金日报表;4、对各...

2021-01-13
X

400-8700-61718720358503
企业邮箱2639601583@qq.com
官方微信