首先问题:开发中我们往往需要做某些功能,这个功能可能会出现很多次,也会出现在不同的项目。需要使用时候又不想重新写,怎么办呢?

解决思路:  把这个特殊的需求功能做成属于自己的组件,当下次需要的我们之间去使用它。那么我们就打包他上次到管理库npm

1.首先你要把你的想打包的项目写完,或者不会报错情况下进行。

  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 导入进来当组件使用吧。

 谢谢。大佬观看,有问题请下面评论反馈谢谢。

Logo

前往低代码交流专区

更多推荐