npm 包开发

此文档以开发一个 vue 组件的 npm 包为例。

新建项目

这里新建一个 vue 项目，这里不再赘述。

组件开发

以开发一个简单的文字链接组件为例。

  1. src文件夹下新建文件夹hz-link，名称可随意更改。
  2. hz-link文件夹下新建 vue 组件文件link.vue和index.js文件，代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <div class="hz-link" :class="[typeClass]"><slot></slot></div>
</template>

<script>
  export default {
    name: "HzLink",
    props: {
      type: {
        type: String,
        default: "default",
      },
    },
    computed: {
      typeClass() {
        return "hz-type-" + this.type;
      },
    },
  };
</script>

<style scoped>
  .hz-link {
    color: #333;
    font-size: 14px;
    line-height: 32px;
  }
  .hz-link.hz-type-primary {
    color: #409eff;
  }
  .hz-link.hz-type-success {
    color: #67c23a;
  }
  .hz-link.hz-type-warning {
    color: #e6a23c;
  }
  .hz-link.hz-type-danger {
    color: #f56c6c;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Link from "./link.vue";

const install = (Vue) => {
  Vue.component(Link.name, Link);
};

// 判断是否直接引入文件，如果是，就不用调用Vue.use()
if (typeof window !== "undefined" && window.Vue) {
  window.Vue.use(Link);
}

export default {
  install,
};
  1. 配置打包命令，对组件进行打包。
  • 在项目根目录package.json文件中新增打包命令。
1
2
3
4
5
6
7
8
{
  // ...其他配置
  "scripts": {
    // ...其他配置
    // --name：打包后组件文件名称  --dest: 打包后打包文件夹名称
    "build-link": "vue-cli-service build --target lib ./src/hz-link/index.js --name hz-link --dest hz-link"
  }
}
  • 打包。
1
npm run build-link

推送到 npm 仓库

  1. 进入打包后的文件夹。
1
2
# hz-link ：打包后的文件夹名称
cd hz-link
  1. 新建package.json文件。
1
2
npm init
# 这里的配置都可先用默认配置，后面会进行一些更改。
  1. 修改package.json文件。
1
2
3
4
5
6
7
8
9
{
  "name": "@haoze/link", // npm包名称，如果是私有仓库，可能需要添加包前缀，比如这里的 @haoze
  "version": "1.0.0", // npm包版本号，如果是升级包，这里的版本号需要比上一次更大
  "description": "", // 描述
  "main": "hz-button.common.js", // 入口文件，安装该包时，自动引入的文件
  "keywords": ["vue"], // 关键词
  "author": "haoze", // 作者
  "license": "ISC"
}

  1. 新建README.md文件，写入一些说明信息。

  2. 更改仓库源

1
2
# https://xxx.xxx.xxx 可以是私有仓库源，也可以是npm、cnpm等仓库源
npm config set registry https://xxx.xxx.xxx
  1. 添加 npm 用户（如果已有用户，可跳过此步骤）
1
2
npm adduser
# 输入命令后会填写 username、password、email
  1. 登录
1
npm login
  1. 发布 npm 包
1
npm publish

出现下面的提示，则代表发布成功

安装 npm 包

  1. 打开 vue 项目根目录
1
2
# 这里是在上面的基础上进行的操作，如果是其他项目安装，打开其他项目根目录即可
cd ..
  1. 安装
1
npm i @haoze/link
  1. 使用
1
2
3
4
5
6
7
8
9
10
11
12
13
// main.js
import Vue from "vue";
import App from "./App.vue";

// 引入发布的组件
import HzLink from "@haoze/link";
import "@haoze/link/hz-link.css";
Vue.use(HzLink);

Vue.config.productionTip = false;
new Vue({
  render: (h) => h(App),
}).$mount("#app");
1
2
3
4
5
6
<!-- APP.vue -->
<template>
  <div id="app">
    <hz-link type="primary">测试组件</hz-link>
  </div>
</template>