lib 库模式发布

目录结构

推荐目录结构如下，我倾向于不用examples还是使用src

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...
.

package.json相关配置

以下为参考

{
  "name": "vcolorpicker",
  "version": "0.1.5",
  "description": "基于 Vue 的颜色选择器",
  "main": "lib/vcolorpicker.umd.min.js",
  "keyword": "vcolorpicker colorpicker color-picker",
  "private": false,

  "license": "MIT",
  
 }

.npmignore

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

# 忽略目录
# examples/
src/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

发布

如果配置了淘宝镜像，先设置回npm镜像：

npm config set registry http://registry.npmjs.org

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。

npm login

执行发布命令，发布组件到 npm

npm publish

参考连接

从零开始：Vue cli3 库模式搭建组件库并发布到npm