组件库系列二：打包发布组件库

打包组件

增加打包组件库指令

在package.json中

"script":{
	// 官网解释：你可以通过下面的命令将一个单独的入口构建为一个库
	// 利用vue自带的工具    构建    构建目标(库)  库的名字 por-ui      当前的入口文件
	"lib":"vue-cli-service build --target lib  --name por-ui   ./src/packages/index.js" 
}

运行打包指令

yarn run lib，根目录下会多出一个dist文件夹，里面就是我们自己开发的ui库

用户通常引用的就是.umd.min.js和.css

默认引用路径

在package.json中，设置完成后就能发布到npm上正常使用了

"script":{

},
"main":"./dist/poly-ui.umd.min.js"

发布npm

创建.npmignore文件

在根目录中创建，设置不上传到npm的文件

// npmignore
/.idea/
/docs/
/src/
/tests/

设置package.json

{
  "name": "por-ui",
  "version": "0.1.0",
  "description": "0.0.1",
  "private": false, // 设置为false才能发布
  "author": "ruiqi11",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": ""// github 地址
  }

编写README.md

# polyUI

## 安装
npm install por-ui -s

### 使用

import porUi from 'por-ui'
import 'por-ui/dist/por-ui.css'
Vue.use(porUi)

LISCENSE

The MIT License | Open Source Initiative

将下面文字复制到LISCENSE中，修改尖括号中的内容（第一个为年份，第二个为作者）

MIT License

Copyright <YEAR> <COPYRIGHT HOLDER>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

切换到npm官方源

npm config get registry // 查看源，我这里是https://registry.npmjs.org/不用切
nrm use npm // 如果不是就要切换下

注册登录

1. 在npm 注册用户
2. 然后登陆npm login

注意：登录时，password 密码被隐藏，正常输入即可

输入完用户名、密码、邮箱，还需要邮箱验证码

发布模块

执行 npm publish

如果成功，在npm账户下就可以看到这个包了

生成npm包的版本图标

Shields.io: Quality metadata badges for open source projects

输入你想要的文字，版本号，颜色， 然后点击按钮

就可以得到图片的访问地址了

复制粘贴到README.md文件上，直接复制网址，加上.svg，然后放在img标签内，可以设置图片靠左

<img style="float:left" src="https://img.shields.io/badge/npm-0.1.0-brightgreen.svg"></img>

设置npm与github关联

在package.json中，关联github，前面已关联

"repository": {
  "type": "git",
  "url": "git@github.com:ynqc/toast.git"
}

在README.md文件添加npm地址

nodei.co

将下面代码放入，注意替换两个package为npm包的名称，这里是por-ui

[![NPM](https://nodei.co/npm/<package>.png)](https://nodei.co/npm/<package>/)

https://nodei.co/)

将下面代码放入，注意替换两个package为npm包的名称，这里是por-ui

[![NPM](https://nodei.co/npm/<package>.png)](https://nodei.co/npm/<package>/)