三分钟，了解npm搭建组件库流程（vue）

假如我写了一些组件，我也想让其他人像通过npm install element-ui的方式安装我们自己的组件，我该从哪里下手？

我们知道npm是用来管理包的，我们通过npm install xxx的时候，会在package.json文件依赖中写入xxx名称(被写在dependencies属性或者devDependencies属性中)，并且xxx包会被拉取到node_modules文件夹下(如果node_modules不存在会进行创建)。

一、组件库本地开发

1、编写组件

我们定义一个packages文件夹，用来编写组件。

在packages文件下定义一个hello文件夹，里面分别定义main.vue和index.js文件：

// main.vue文件
<template>
  <div>hello,{{ msg }}~</div>
</template>
<script>
export default {
  props: ["msg"],
  name: "qb-hello",
};
</script>

在main.vue文件中编写组件和我们平时开发一样简单。

// index.js文件
import qbHello from './src/main.vue';
export default qbHello;

index.js文件中引入qbHello组件对象，然后，再将其导出。

2、管理组件

在和packages文件同级目录创建index.js文件:

import qbHello from "./packages/hello/index.js";

const components = [qbHello]

const install = function (Vue, opts = {}) {
    components.forEach(component => {
        Vue.component(component.name, component);
    });
};

export default {
    version: '1.0.8',
    install,
}

这里将编写的组件推入到components组件中。

然后定义install函数，执行install函数的时候，相当于通过循环的方式为Vue注册了一个个的全局组件。

3、组件库描述文件

再通过npm init的方式在统计目录下按照提示输入信息，生成package.json文件：

{
  "name": "qb-component",
  "version": "1.0.8",
  "description": "this is a ui libray",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "qb",
  "license": "ISC",
  "devDependencies": {},
  "keywords": []
}

package.json是组件库的描述文件，这里简单描述了组件库的名称、版本、描述、入口文件、作者和关键词等信息。

此时，我们的极简组件库就在本地开发完成了，接下来就将其发布到npm中。

二、组件库推送`npm`

4、注册账号

浏览器输入：npm (npmjs.com)，找到sing in按钮按照提示操作即可。

5、本地添加账号

然后通过npm adduser的方式在本地添加账号，让本地和远程建立连接。然后根据提示输入npm的账号、密码和注册邮箱即可。

6、发布包

现在就可以通过npm publish的方式发布我们自己的包到第三方仓库npm中了。

发布结果如下所示。

$ npm publish
npm notice
npm notice 📦  qb-component@1.0.8
npm notice === Tarball Contents ===
npm notice 290B index.js
npm notice 272B package.json
npm notice 63B  packages/hello/index.js
npm notice 130B packages/hello/src/main.vue
npm notice === Tarball Details ===
npm notice name:          qb-component
npm notice version:       1.0.8
npm notice filename:      qb-component-1.0.8.tgz
npm notice package size:  582 B
npm notice unpacked size: 755 B
npm notice shasum:        e4d68bab6cb349e5861a3600da0bbd729038e81b
npm notice integrity:     sha512-dVixKqBap5Q5F[...]ruVUrKub0r98A==
npm notice total files:   4
npm notice
npm notice Publishing to https://registry.npmjs.org/
+ qb-component@1.0.8

到这里，我们就已经把我们本地的包发布到npm中了。可以打开自己的npm看看结果：

至此，我们就在npm中发布了自己的组件库。

三、组件库应用在项目中

7、安装包

你现在就可以在自己的项目中通过npm install qb-component的方式下载我的组件库了。执行结果为

added 1 package, and audited 3 packages in 2s
found 0 vulnerabilities

8、分析包

当我们不确定是否安装成功时，可以通过执行npm ls的方式查找包：执行结果为

project@1.0.0 E:\learn\npm\project
└── qb-component@1.0.8

9、在项目中注册

首先在main.js文件中引入并注册：

import qbComponent from 'qb-component';
Vue.use(qbComponent)

10、在项目中使用

我们可以在App.vue文件中使用我们自己组件库中的组件：

<template>
  <qb-hello :msg="msg"></qb-hello>
</template>
<script>
export default {
  data() {
    return {
      msg: 'qb'
    }
  }
}
</script>

现在，我们就在自己的项目中使用了自己组件库中的组件qb-hello。