美文网首页vuevue
vue-cli4封装组件并发布到npm

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

作者: 嘤夏影 | 来源:发表于2021-07-26 22:05 被阅读0次

    第一步:创建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

    相关文章

      网友评论

        本文标题:vue-cli4封装组件并发布到npm

        本文链接:https://www.haomeiwen.com/subject/qmngmltx.html