把vue项目或者vue组件发布成npm包或者打包成lib库文件本地使用

将vue项目发布成npm库文件,第三方通过npm依赖安装使用;使用最近公司接了一个项目,这个项目需要集成到第三方页面,在第三方页面点击项目名称,页面变成我们的项目页面;要求以npm库文件提供给他们;

发布和删除自定的npm包(基于vue/cli4)(如果是私服使用可以不发布)
1、npm源设置(项目终端中执行)

阿里云镜像:npm config set registry https://registry.npmmirror.com

npm官网:npm config set registry https://registry.npmjs.org
2、创建vue项目(vue cli)

vue create xxxx (名字自己取)

创建好后npm install
3、自己的组件

在src下面新建package包(文件夹名字随便,后面配置打包命令也要用这个名字),分别创建一个文件夹(组件放这里面)和index.js文件

结构如下,

为了使图片能够正常打包,且从npm安装后能正常显示,需要创建vue.config.js文件(有就不用创建了),然后在该文件写上如下图所示代码 vue组件或者项目里面有图片,发布到npm图片需要正常显示

在package新建一个打包命令,打包命令里面的包名不能和package的name相同,不然上传到npm后,无法通过npm install 包名 安装;命令如下

"package": "vue-cli-service build --target lib ./src/package/index.js/ --name xxxxx --dest xxxxx " (xxxxx是包名)

项目终端中运行npm run package会生成 xxxxx 文件夹

cd 进入 xxxxx 文件夹执行 npm init -y ,会产生一个package.json文件如下

version是版本信息,每次更新版本递增,如果想减小包体积,可以删除一些不必要的文件保留必要文件,箭头所指为必要文件;

发布包之前,把npm源更换为官网源

在包终端中执行 npm login 跟着提示填写用户名、密码、邮箱、邮箱验证码

然后执行命令 npm publish 将包上传到npm

执行 npm install xxxxx 可以下载包

同时还可以继续优化文件结构,新建style文件夹,将xxxxx.umd.min.js改为 index.js,把package的main入口改为index.js;

同时新建一个readme.md文件,描述组件使用方法

在发布包之前验证包的各项功能是否正常,可以在main.js中引入

相关推荐
夏幻灵15 分钟前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_28 分钟前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝32 分钟前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions40 分钟前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发41 分钟前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_1 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞051 小时前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、1 小时前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao1 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强