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

纯干货，不逼逼，跟着一步步走起～～～

先写一个测试组件

• 使用成熟的脚手架vue-cli先生成一个项目

• 创建存放UI组件的目录，模仿element-ui，起名packages，目录如下：

  image.png

• 在测试组件Button中添加测试代码

  image.png

• 测试组件Button/index.js

  ![image.png](https://img.haomeiwen.com/i3887784/c5494e2f82880b44.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

• 修改package/index.js 文件

  image.png

• 修改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要独特，避免重名哦】

  
  image.png

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

最后的最后

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

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

image.png

yes！！！ 成功哈哈哈哈