使用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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 Javascript
jQuery实现友好的轮播图片特效
Jan 12 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 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/08/06 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
2015/12/25 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
2017/06/13 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python实现图像几何变换
2015/07/06 Python
深入理解Python3中的http.client模块
2017/03/29 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python求解汉诺塔游戏
2020/07/09 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
python 实现控制鼠标键盘
2020/11/27 Python
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
大学生求职自荐信
2013/12/12 职场文书
企业出纳岗位职责
2014/03/12 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
学校通报表扬范文
2015/05/04 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers