Vue项目打包组件并上传到npm在其他项目和下载引用 步骤流程
首先问题:开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢?解决思路: 把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。 修改你项目主目录下的package.json文件在文件添加一个程序的入口配置 如...
首先问题:开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢?
解决思路: 把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm
1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。
- 修改你项目主目录下的package.json文件在文件添加一个程序的入口配置 如图:还有记得修改private 为 false
2.修改项目目录 -》bulid -》webpack.prod.conf.js文件 如图:
需要注意的 libraryTarget 的umb 是写死的,原因是什么,可能要问npm官方了。
3.第三步。修改 config -》index.js 文件 如图
第4步。修改main.js 在此文件中添加你的功能组件并export导出
/* 封装的功能组件 */ import VueHzf5Package from './components/divImgBox.vue' /* 导出 */ export default VueHzf5Package
第5步.现在所有配置修改该的地方已经差不多,那么我们可以进行打包了。命令:
npm run build
打包成功后这样。注意检查是否打包成功,
6.最后一步.发布到npm上。首先先登录并邮箱验证:命令
npm login 回车。
之后输入你的账号、密码、邮箱。(如果没有账号则去npm官网注册很简单:官方网站)
登录成功后就可以上次你的组件了 命令:npm publish ;
呐。大功告成。我的web520项目 1.0版本成功上传上去了。注意上传成功,需要10分钟后才能下载应用使用
10分钟后去别的项目引用 指令 :npm install --save-dev web520 (web520是你上传后的包名)
之后就在你项目main.js improt 导入进来当组件使用吧。
谢谢。大佬观看,有问题请下面评论反馈谢谢。
更多推荐
所有评论(0)