使用Vue-cli3.0创建的项目 如何发布npm包


Posted in Javascript onOctober 10, 2019

在使用vue进行项目开发时,如果我们想要发布一个包,有时候会有点迷糊,不知道应该怎么修改脚手架的默认设置。这里记录一下一些常见的操作。

创建index.js进行模块的导出

将我们需要导出的组件在index.js文件中进行统一导出,可能之前需要进行处理,是先进行全局注册Vue.component,还是用户自己注册。

import App from './App.vue'
export default App;

修改vue.config.js配置文件

修改publicPath的路径为相对路径

module.exports = {
 lintOnSave: false,
 runtimeCompiler:true,
 publicPath: './',
}

修改package.json中的script

vue-cli默认给我们设置了build,但是我们不使用这个build,而是打包我们之前创建的index.js文件

新增build-bundle

"scripts": {
 "serve": "vue-cli-service serve",
 "build": "vue-cli-service build",
 "build-bundle": "vue-cli-service build --target lib --name AutoForm ./src/index.js",
 "lint": "vue-cli-service lint"
 },

修改package.json中的main

这里的main是打包后的程序入口,也就是我们通常下载一个包后使用import xxx from YYY默认从node_modules下查找的文件,因此,我们需要修改为我们打包后的文件名,否则查找不到这个文件。

"main": "dist/AutoForm.common.js",

这样的话,一个包就修改完成,打包后正常发布就可以使用了。

总结

以上所述是小编给大家介绍的使用Vue-cli3.0创建的项目 如何发布npm包,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
three.js如何实现3D动态文字效果
Mar 03 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 #Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 #Javascript
Vue使用NProgress的操作过程解析
Oct 10 #Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
使用vscode快速建立vue模板过程详解
Oct 10 #Javascript
You might like
php将时间差转换为字符串提示
2011/09/07 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
js倒计时小程序
2013/11/05 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
[04:44]DOTA2英雄梦之声_第12期_矮人直升机
2014/06/21 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Pandas之Fillna填充缺失数据的方法
2019/06/25 Python
python实时监控logstash日志代码
2020/04/27 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
一些.net面试题
2014/10/06 面试题
专业求职信撰写要诀
2014/02/18 职场文书
内刊编辑求职自荐书范文
2014/02/19 职场文书
保险公司开门红口号
2014/06/21 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
怎样写离婚协议书
2015/01/26 职场文书
辅导员学期工作总结
2015/08/14 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书