一、服务器搭建仓库

Nexus是Maven仓库管理器，如果你使用Maven，你可以从Maven中央仓库下载所需要的构件（artifact），但这通常不是一个好的做法，你应该在本地架设一个Maven仓库服务器，在代理远程仓库的同时维护本地仓库，以节省带宽和时间，Nexus就可以满足这样的需要。此外，他还提供了强大的仓库管理功能，构件搜索功能，它基于REST，友好的UI是一个extjs的REST客户端，它占用较少的内存，基于简单文件系统而非数据库。这些优点使其日趋成为最流行的Maven仓库管理器。 Nexus私服是在局域网的一种特殊的远程仓库，目的是代理远程仓库及部署第三方构件。有了私服之后，当 Maven 需要下载jar包时，先请求私服，私服上如果存在则下载到本地仓库。否则，私服直接请求外部的远程仓库，将jar包下载到私服，再提供给本地仓库下载。

类型介绍

proxy
代理仓库，将公共 npm 服务器的资源代理缓存，减少重复下载，加快开发人员和CI服务器的下载速度。
该仓库地址为： ************/repository/npm-public/

group
仓库组，用来合并多个hosted/proxy仓库，当你的项目希望在多个repository使用资源时就不需要多次引用了，只需要引用一个group即可。
该仓库地址为： ************//repository/nuget-group/

hosted
是本地仓库，用于上传自己的npm包以及第三方npm包。
该仓库地址为： ************//repository/npm-local/ //参考地址：juejin.cn/post/698691…

二、封装组件库

1. 环境准备

（1）初始化Vue项目 vue create epec-ui

（2）运行项目 npm run serve

2. 组件封装

因为我们可能会封装多个组件，所以在src下面新建一个package文件夹用来存放所有需要上传的组件。

2.2 编写组件代码

这里我们就以e-input组件为例，任意编写一点代码，代码如下

<template>
    <div>
      <el-input ref='inp' v-bind="$attrs" v-on="$listeners"  placeholder="请输入内容">
        <template v-for="(value,name) in $slots" #[name]='slotData'>
          <slot :name="name" v-bind="slotData || {}"></slot>
        </template>
      </el-input>
    </div>
  </template>
  <script>
  export default {
    name:'eui-input',
    mounted(){
        const entries= Object.entries(this.$refs.inp)
        for (const [key,value] of entries) {
           if(typeof(value)==='function'){
            this[key]=value;
          }
        }
    }
  }
</script>

然后我们引用到App.vue组件里面验证一下，看是否组件可用，代码如下：

<template>
  <div class="home">
    <eui-header-top></eui-header-top>
    <eui-btn-animation  :isIcon="false" btnHeight="40" fontSize="16" btnWidth="96" :fontWeight="350"  title="测试按钮"/>
	<eui-input style="width:200px" ref='eInput1' :maxlength="10" placeholder="请输入内容" v-model="input" show-word-limit  @input="inputChange">
        <i slot="suffix" class="el-input__icon el-icon-date"></i>
    </eui-input>
  </div>
</template>
<script>
import euiBtnAnimation from '@/package/eui-btn-animation/index.vue';
import euiInput from '@/package/eui-input/index.vue';
import euiHeaderTop from '@/package/eui-header-top/index.vue';
import Api from '@/api/api';
export default {
	name: 'Home',
	components: {
		euiBtnAnimation,
		euiInput,
		euiHeaderTop
	},
	data(){
		return {
			input:''
		}
	},
	created(){
		this.getData()
	},
	methods:{
		inputChange(val){
            console.log(val)
        },
		async getData(){
			let res=await Api.queryTableName();
			console.log(res)
		},
	}
}
</script>

效果显示如下：

2.3 使用Vue插件模式

在package目录下新建index.js文件，代码如下：

import {get,post,put,deletefn} from '../service/http';//axios规则
const requireComponents = require.context('./', true, /\.vue$/) // 代替import进行动态引入，webpack中方法
const install = (Vue) => {
    if (install.installed) return
    // 遍历引入组件
    requireComponents.keys().forEach(fileName => {
        const config = requireComponents(fileName) // 当前组件
        const componentName = config.default.name  // 获取组件名，即vue文件中的name
        Vue.component(componentName, config.default) // 注册组件
    })
}
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export const request={
    get,
    post ,
    put,
    deletefn
}
export default {
    install
}

上传代码主要的的一项工作就是将我们封装好的组件注册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。

3. 组件打包

"lib": "vue-cli-service build --target lib --name epec-ui --dest lib src/package/index.js" 打包命令解释： --target lib 关键字指定打包的目录 --name 打包后的文件名字 --dest 打包后的文件夹的名称打包执行完成后我们项目目录下就会多出一个lib文件夹，存放的是打包后的文件。

4. 发布到npm

4.1 配置package.json

4.2 发布到npm仓库

（1）设置镜像源

npm config set registry=http://**********/repository/npm-local/

   //查看地址 npm config get registry

（2）添加npm用户

npm adduser

（3）发布npm

npm publish

5. 从npm安装使用

设置镜像地址 npm config set registry=http://***********/repository/npm-local/
登录npm账户 npm login //按照提示输入账号、密码、邮箱，（name:namme password : password）
安装 npm install epec-ui --registry=http:*********/repository/npm-local/ 然后在main.js引用注册，代码如下：

import epecUi from "epec-ui";
Vue.use(epecUi);
//使用request
import {request} from "epec-ui";

epec-ui封装流程