使用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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
让人期待的2011年度最佳 jQuery 插件分享
Mar 16 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
文本框文本自动补全效果示例分享
Jan 19 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
JavaScript动态创建link标签到head里的方法
Dec 22 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
Jan 20 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
Jan 23 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 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自定义加密与解密程序实例
2014/12/31 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
PHP解决中文乱码
2017/04/28 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
js实现div的切换特效上一个下一个
2014/02/11 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
Bootstrap精简教程
2015/11/27 Javascript
使用javascript插入样式
2016/03/14 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
nodejs提示:cross-device link not permitted, rename错误的解决方法
2019/06/10 NodeJs
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
泰国在线书店:SE-ED
2020/06/21 全球购物
TCP/IP模型的分界线
2012/12/01 面试题
大学生毕业鉴定
2014/01/31 职场文书
教师网络培训感言
2014/03/09 职场文书
2014年手术室工作总结
2014/11/26 职场文书
西安导游词
2015/02/12 职场文书
在职证明格式样本
2015/06/15 职场文书
导游词之桂林
2019/08/20 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Python创建SQL数据库流程逐步讲解
2022/09/23 Python