vue组件打包并发布到npm的全过程

 更新时间:2023年01月13日 15:36:38   作者:一尘不染的白  
这篇文章主要介绍了vue组件打包并发布到npm的全过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、创建项目

vue create 项目名称

二、配置相关文件

1.修改文件名

src目录更改为-examples // 改成 examples 用作示例展示

新增 packages   用于编写存放组件

2.根目录下新建 vue.config.js文件

因为src 目录更名为 examples ,导致项目无法运行

在 vue.config.js 添加以下配置

module.exports = {
  pages: {
    index: {
      entry: "examples/main.js",
      template: "public/index.html",
      filename: "index.html"
    }
  }
}

然后就可以在 packages  新建组件了

例如以下截图

packages/lemonUploads/index.js 添加以下代码

// 导入组件,组件必须声明 name
import LemonUploads from './index.vue';
// 为组件提供 install 安装方法,供按需引入
LemonUploads.install = function(Vue) {
    Vue.component(LemonUploads.name, LemonUploads);
};
// 默认导出组件
export default LemonUploads;

将packages中的所有组件导出

packages下新建 index.js 并添加

// 导入组件
import LemonUploads from './lemonUploads/index';
 
// 存储组件列表
const components = [LemonUploads];
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
	// 遍历注册全局组件
	components.forEach((component) => {
		Vue.component(component.name, component);
	});
};
 
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
	install(window.Vue);
}
 
export default {
  // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
	install,
	// 以下是具体的组件列表
	LemonUploads,
};
 

在组件项目中引入

main,js中添加如下:

// 导入组件库
import LemonUploads from './../packages/lemonUploads/index'
// 注册组件库
app.use(Antd)
app.use(LemonUploads)
app.mount('#app')

3.发布到npm

1)更改配置文件-package.json

"name": "lemon-upload",
  "version": "1.8.42",
  "private": false,
  "keyword": "上传文件 vue antdesign upload",
  "description": "基于vue3.x+antdesign的文件上传组件",
  "author": "LemonSong",
  "main": "",

2)更改打包编译方式

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name lemonUploads --dest lib packages/index.js"
  },

3)新增.npmignore文件 写入一些不必要上传的文件名称

.DS_Store
node_modules/
examples/
public/
packages/
vue.config.js
babel.config.js
*.map
*.html
 
# local env files
.env.local
.env.*.local
 
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
 
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

 4)打包编译

npm  run lib

5)发布npm

登录npm

npm login

发布命令

npm publish

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue组件懒加载的操作代码

    Vue组件懒加载的操作代码

    在本文中,我们学习了如何使用 Intersection Observer API 和 defineAsyncComponent 函数在 Vue 组件可见时对其进行懒加载,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友一起看看吧
    2023-09-09
  • VSCode搭建Vue项目的方法

    VSCode搭建Vue项目的方法

    这篇文章主要介绍了VSCode搭建Vue项目的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 详解vue3中虚拟列表组件的实现

    详解vue3中虚拟列表组件的实现

    这篇文章主要为大家详细介绍了vue3中实现虚拟列表组件的相关知识,包含加载更多以及loading状态,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-10-10
  • 如何利用vue3实现一个俄罗斯方块

    如何利用vue3实现一个俄罗斯方块

    俄罗斯方块这个游戏相信大家都玩过,下面这篇文章主要给大家介绍了关于如何利用vue3实现一个俄罗斯方块的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • 详解vue-resource promise兼容性问题

    详解vue-resource promise兼容性问题

    这篇文章主要介绍了详解vue-resource promise兼容性问题,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • Vue3+Elementplus实现面包屑功能

    Vue3+Elementplus实现面包屑功能

    这篇文章主要为大家详细介绍了Vue3如何结合Elementplus实现面包屑功能,文中的示例代码简洁易懂,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2023-11-11
  • vue实现横向时间轴

    vue实现横向时间轴

    这篇文章主要为大家详细介绍了vue实现横向时间轴,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue中addEventListener() 监听事件案例讲解

    Vue中addEventListener() 监听事件案例讲解

    这篇文章主要介绍了Vue中addEventListener() 监听事件案例讲解,包括语法讲解和事件冒泡或事件捕获的相关知识,本文结合示例代码给大家讲解的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue3简单封装input组件和统一表单数据详解

    vue3简单封装input组件和统一表单数据详解

    最近有一个需求是很多个表单添加,编辑等操作,会用到很多input输入框,所以就想把input进行简单封装,这篇文章主要给大家介绍了关于vue3简单封装input组件和统一表单数据的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue+echart实现圆滑折线图

    vue+echart实现圆滑折线图

    这篇文章主要为大家详细介绍了vue+echart实现圆滑折线图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论