第一步:创建vue项目
vue create myproject
第二步:调整项目结构
将原来的项目目录按下图结构重新设置,目录的结构我们参考element的项目结构,需要将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件.
image.png
第三步:手动创建vue.config.js
cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:
vue.config.js文件:
第四步:组件的创建,参考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
网友评论