使用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 相关文章推荐
document.documentElement && document.documentElement.scrollTop
Dec 01 Javascript
js 匿名调用实现代码
Jun 19 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
Dec 10 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
深入理解vue-class-component源码阅读
Feb 18 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 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源代码数组统计count分析
2011/08/02 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
php上传大文件设置方法
2016/04/14 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
react基本安装与测试示例
2020/04/27 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
2021/03/01 jQuery
python进阶教程之文本文件的读取和写入
2014/08/29 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python的标准模块包json详解
2017/03/13 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
蔻驰美国官网:COACH美国
2016/08/18 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
教师考核表个人总结
2015/02/12 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
小学中队长竞选稿
2015/11/20 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android