手把手教你如何发布自己的UI库

240 阅读1分钟

纯干货,不逼逼,跟着一步步走起~~~

先写一个测试组件

  • 使用成熟的脚手架vue-cli先生成一个项目
  • 创建存放UI组件的目录,模仿element-ui,起名packages,目录如下:

        

  • 在测试组件Button中添加测试代码
        
  • 测试组件Button/index.js
        
  • 修改package/index.js 文件
        
  • 修改packgage.json文件,增加下面配置
  • "scripts": {  
    "serve": "vue-cli-service serve",  
    "build": "vue-cli-service build",  
    "lint": "vue-cli-service lint",  
    "build-bundle": "vue-cli-service build --target lib --name nice-ui ./src/packages/index.js"
    },
  • 控制台运行 npm run build-bundle 可以看到生成dist目录

开始发布啦~~~

  • 注册npm用户名 www.npmjs.com/
  • 终端登录自己的npm账号
  • 然后对package.json进行最后一次修改,增加main,files配置【name要独特,避免重名哦】
         


  • 最后执行 npm pubulish,发布成功啦,快去www.npmjs.com/看看吧

最后的最后

发布了还是得要测试一下嘛

  • 找一个空项目
  • 下载自己的npm包  --->   npm i 【你的name】
  • 引入刚刚我们写的button组件
  • 运行项目


yes!!! 成功哈哈哈哈