vue-cli4封装组件并发布到npm

第一步：创建vue项目
vue create myproject
第二步：调整项目结构
将原来的项目目录按下图结构重新设置，目录的结构我们参考element的项目结构，需要将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件.

image.png

第三步：手动创建vue.config.js
cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:
vue.config.js文件：

image.png

第四步：组件的创建，参考topNav目录结构，创建index.js如下

image.png

第五步：在packages目录下创建入口脚本index.js

image.png

第六步：引用main.js中引入

image.png

image.png

第七步：按照npm的发包规则来配置我们的package.json

image.png

第八步：创建一个.npmignore忽略掉一些不需要上传的文件减少大小

image.png

第九步：npm官网注册账号

第十步：打开终端，在当前项目目录下输入
yarn lib 打包项目
npm login 登录npm
npm publish 发布
注意：刚注册好的npm账号一定要去邮箱点开npm发过来的验证邮件，不然会报错
In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
还有可能是名字重复也会报此错误

image.png

此文章只做为个人笔记，记性不好，只能这样了
参考文章https://www.yuque.com/homacheuk/dmqta3/mbro9z