我将以一个vue2.0的组件为例，为大家详细的讲述下组件创建以及发布的过程

准备工作

• 安装nodejs
• 全局安装vue脚手架

npm install -g vue-cli

创建一个vue项目

vue create vue-loading-icon

按照脚手架提示进行安装

image.png

显示如下信息即为安装成功

250aebb0dc074544a3e9e0a5b76be108.png

修改项目目录

在项目根目录下创建packages文件夹
将src文件夹改名为examples
修改vue.config.js文件，若根目录下没有此文件，请手动添加

const { defineConfig } = require('@vue/cli-service');
const path = require('path');

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      fileName: 'index.html'
    }
  },
  chainWebpack: config => {
    config.module
    .rule('js')
    .include.add(resolve('packages')).end()
    .use('babel').loader('babel-loader').tap(options=>{return options});
  },
  // css: { extract: false }
})

开始开发vue组件

在packages文件夹下写你想要开发的组件源码
我的packages的目录结构是这样的

ed93833cda134f33af9118a2b5b6bd81.png

LoadingA/main.vue如下：

<style scoped lang="less">
.loader01 {
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  border: 8px solid var(--color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: loader-rotate 1s linear infinite;
}
.loader01::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--color);
  border-radius: 50%;
  position: absolute;
  top: -1px;
  left: 33px;
}

@keyframes loader-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<template>
  <div class="loader01" :style="pStyle"></div>
</template>

<script>
export default {
  props: {
    color: String,
    speed: Number,
  },
  data() {
    return {
      pStyle: {
        '--color': '#2595f1',
      },
    };
  },
  mounted() {
    this.setStyle();
  },
  methods: {
    setStyle() {
      if (this.color) this.$set(this.pStyle, "--color", this.color);
    },
  },
};
</script>

LoadingA/index.js如下：将您的组件注册

import LoadingA from './src/main.vue';
DsTree.install = function(Vue) {
  Vue.component(LoadingA.name,LoadingA);
}
export default LoadingA;

批量导出组件
packages/index.js如下：

import LoadingA from './LoadingA/index.js';
import LoadingB from './LoadingB/index.js';

let components = [
  LoadingA,
  LoadingB
]

const install = function (Vue) {
  if (install.installed) return;
  components.map(component=> Vue.component(component.name,component))
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  install,
  LoadingA,
  LoadingB
}

本地测试组件

接下来，就可以在本地进行组件的测试了，您可以在您的examples文件夹下，创建一个vue文件，然后引用此组件，进行组件的测试，我是在App.vue中引用了组件
App.vue内容如下：

<template>
  <div id="app">
    <div class="load-list">
      <div class="load-box load01">
        <div class="name">loading-A</div>
        <div class="demo">
          <loading-a/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import LoadingA from '../packages/src/LoadingA.vue'
export default {
  name: 'App',
  components: {
    LoadingA
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}
.load-box{
  width: 200px;
  height: 132px;
  border: solid 1px #cdcdcd;
}
.load-box .name{
  width: 100%;
  text-align: center;
  border-bottom: solid 1px #cdcdcd;
  height: 32px;
  line-height: 32px;
  flex-shrink: 0;
  flex-flow: 0;
}
.load-box .demo{
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

</style>

打包编译

本地测试完成后，就可以进行打包编译了，请您在package.json文件中的script中增加一行代码

"build-lib": "vue-cli-service build --target lib --name load --dest lib packages/index.js"

执行编译命令

接下来，我们执行下编译命令

npm run build-lib

等待命令执行完成后，项目根目录下会生成一个lib的文件夹，生成文件结构如下：

6c9ef490dddd4399bcaeefbb86f07401.png

如果您想生成内联样式，则需要在vue.config.js中增加

css: { extract: false }

还要在package.json中设置入口文件

"main": "lib/index.umd.min.js"

发布前的准备工作

首先，你需要确定你要发布的npm源
这块可以简单了解下nrm
什么事nrm呢，其实nrm 是一个 npm 源管理器，允许你快速地在 npm源间切换。
nrm安装

npm install -g nrm

查看源

nrm ls

使用源

nrm use XXX

之后你需要在项目根目录下创建一个.npmignore的文件
文件中写明你要忽略的文件，一般保留只需要保留README.md,lib和package.json即可，我的文件是这样写的

examples/
packages/
public/
node_nodules/
preview/
vue.config.js
postcss.config.js
babel.config.js
.gitignore
jsconfig.json
package-lock.json
*.map

另外，你需要将你项目的package.json文件中的 private设置为false

private:false

编写README.md文件，这里边的内容是其他人引用你的包的使用说明哦

登录到私服

npm login

根据命令提示，输入用户名，密码，以及绑定的邮箱

发布到私服

npm publish

稍等几秒钟后，您就可以到npm官网上搜索下您发布的包啦。

f634d724bcf74a209cec9fe5bbbbc7cc.png

到这里，整个发布流程就差不多了，但是您还是需要在做下引用测试哦

引用测试

在项目中按照使用说明进行操作，安装依赖包,使用组件测试是否正常发布，并可用即可

f0027127dcf34fcc8feb33b108aa733c.png

本地调试npm包

在你的npm源码项目中，也就是vue-loading-icon这个项目根目录下执行

npm link

创建一个软链，相当于全局安装了一个 vue-loading-icon依赖
在测试项目根目录下，也就是 vue-comp-demo中执行

npm link vue-loading

执行上述操作后，在npm包中修改了内容，重新编译后，即可实时的反应到引用的项目下，无需发布到npm中，待调试完成后，就可以发不到npm上了