组件封装并发布自己的npm包

前言

使用vue框架开发，封装自己私有的组件库上传到npm

优点：

• 方便使用，更好的适应项目场景
• 可作为开源项目，积累经验

环境

本次封装的是vue的组件，直接在vue脚手架项目里面进行封装

创建项目

vue create demo

运行项目

npm run serve

项目目录

组件封装

新建package文件夹

在src下面新建一个package文件夹用来存放所有需要上传的组件

编写组件代码

使用vue插件模式

这里用到了vue提供的一个公开方法：install。这个方法会在你使用vue.use(plugin)时被调用，这样使得我们的组件可以注册到全局，在子组件的任何地方都可以使用

在package目录下新建index.js文件

以上代码会将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行

组件打包

• 修改我们项目的package.json文件，配置打包命令

"package": "vue-cli-service build --target lib ./src/package/index.js --name pig-ui --dest pig-ui"

打包命令解释

• --target lib 关键字 指定打包的目录
• --name 打包后的文件名字
• --dest 打包后的文件夹的名称

执行打包命令

npm run package

发布到npm

初始化package.json

在pig-ui文件夹下初始化一个package.json文件进入pig-ui目录执行命令

npm init -y

注：发布npm包的name不能与现有的包重复

• 注册npm账户
• 在发布包文件夹下打开终端，登陆账户密码邮箱
• 执行发布命令

  npm publish

  

引入项目

在项目中引入刚刚上传的包

 

总结

到这里我们的组件就封装好了，并且可以直接从npm仓库下载使用