一、dockerhub搜索verdaccio/verdaccio镜像

  

 二、docker拉取镜像

docker pull verdaccio/verdaccio:latest

 三、查看镜像

docker image ls

 

四、运行容器 

docker run -it -d --name verdaccio -p 4873:4873 verdaccio/verdaccio

 或者

docker run -it -d --name verdaccio -p 4873:4873 -v /home/verdaccio/storage:/verdaccio/storage -v /home/verdaccio/conf:/verdaccio/conf -v /home/verdaccio/plugins:/verdaccio/plugins verdaccio/verdaccio

1.  运行mkdir /home/verdaccio，创建 /home/verdaccio 目录
2. cd /home/verdaccio,进入/home/verdaccio 目录
3. mkdir storage,创建storage目录
4. mkdir conf,创建conf目录
5. mkdir plugins,创建plugins目录
6. -v 宿主机:容器，容器目录映射到宿主机目录

   注意： 宿主机目录 /home/verdaccio/storage 需要设置权限，不然会因为权限问题而导致操作失败。

verdaccio 容器中创建的用户是verdaccio，无法写入主机 root 用户的文件，容器内 verdaccio 使用的 uid 为 10001，gid 为 65533，可以在主机修改权限

chown -R 10001:65533 /home/verdaccio/storage

chown 10001:65533 /home/verdaccio/conf

   宿主机目录映射成功后，会简化很多操作，比如：  
  在 /home/verdaccio 目录下会创建 storage 目录，如果发布了包，则在此目录下的 data 中能找到对应的包文件夹，可以查看所有上传的npm包，此处也可以直接删除该包；  在 /home/verdaccio 目录下会创建conf 目录,配置文件会映射到此目录下，方便我们需要时修改配置信息。

拷贝 verdaccio 配置文件

 如果不想做本地目录映射，也可以使用如下命令，拷贝出 verdaccio 镜像的配置文件。  
  docker cp：在容器和本地文件系统之间，拷贝文件或文件夹。

docker cp verdaccio:/verdaccio/conf/config.yaml /home

 五、私有库部署成功，查看容器

docker ps -a

 六、浏览器访问私有库

 浏览器访问http://ip:4873

七、安装nrm 

nrm是npm的一个镜像源管理工具，可帮助快速切换镜像源，方便管理。在终端（Mac）或者cmd命令窗口（windows）输入命令，全局安装 

npm install nrm -g

 查看版本

nrm -V

 八、nrm使用

查看可供选择的源 

nrm ls

• 查看当前源：nrm current
• 切换源：nrm use <registry>
• 添加源：nrm add <registry> <url> 例如： nrm add aaaaa https://aaaaa.com
• 删除源：nrm del <registry>
• 测试源的响应时间：nrm test <registry>

 添加源私有npm源

nrm add myregistry http://133.269.67.168:8773/

九、发布一个包

有了私有库以后，就可以在其上发布 npm 包。但初始化时需要先添加用户，设置用户名和密码等，然后就可以直接发包了。

• 添加用户

  npm adduser --registry http://0.0.0.0:4873/
  

  输入用户名、密码和邮箱。

•  

• publish

  当需要把某个项目发布到私有库时，直接 publish。

  npm publish --registry http://0.0.0.0:4873/
  

  发布成功后，刷新页面，就能看到最新发布的包。

• install

       在项目目录下增加 .npmrc 文件，指定仓库地址。

registry=http://0.0.0.0:4873/

        使用 npm install 包名，即可安装私有包了。

十、vue发布组件库

 1、添加上面刚部署好的私有npm镜像仓库

nrm add myregistry http://133.269.67.128:4873/

 2.查看刚添加的私有npm镜像仓库

nrm ls

3.使用刚添加的私有npm镜像仓库

nrm use myregistry

 4.创建一个vue项目开发组件库

vue create volodyaui

 5.开发组件

在src目录下新建package文件夹，在src/package目录下新建index.js文件，在src/package目录下新建my-button文件夹和my-clock文件夹，在src/package/my-button目录和src/package/my-clock目录下分别新建index.vue

 src/package/index.js

出口文件：引入封装好的组件进行批量注册，然后导出。

// 引入封装好的组件
import MyButton from "../package/my-button/index.vue";
import MyClock from "../package/my-clock/index.vue";
import MyCustomchart from "../package/my-customchart/index.vue";

// 将来如果有其它组件,都可以写到这个数组里
const coms = [MyButton, MyClock, MyCustomchart];

// 批量组件注册
const install = function (Vue) {
    coms.forEach((com) => {
        Vue.component(com.name, com);
    });
};


// 注意这里的判断，很重要
if(typeof windwo !== 'undefined' && window.Vue) {
    window.Vue.use(comment)
  }
  
export default install; // 这个方法以后再使用的时候可以被use调用

为什么导出为install?
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为install 方法。install 方法调用时，会将 Vue 作为参数传入。 

 src/package/my-button/index.vue

<template>
    <button @click="handleClick" :disabled='disabled'>
        <slot></slot>
    </button>
</template>
<script>
export default {
    name: "MyButton",
    props: {
        disabled: Boolean
    },
    methods: {
        handleClick(evt) {
            this.$emit('click', evt);
        }
    }
};
</script>

 src/package/my-clock/index.vue

<template>
  <div id="clock">
    <div class="box" :style="{ color: textColor }">
      <span class="date">{{ date }}</span>
      <span class="time">{{ time }}</span>
    </div>
  </div>
</template>
<script>
export default {
  name: "MyClock",
  props: {
    textColor: {
      type: String,
      default: "#2cf3fb",
    },
  },
  data() {
    return {
      timer: null,
      date: "",
      time: "",
    };
  },
  created() {
    this.updateTime();
  },
  mounted() {
    this.timer = setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  methods: {
    updateTime() {
      let date = new Date();
      let sDate = "-";
      let sTime = ":";

      let YYYY = formatHandle(date.getFullYear());
      let MM = formatHandle(date.getMonth() + 1);
      let DD = formatHandle(date.getDate());

      let hh = formatHandle(date.getHours());
      let mm = formatHandle(date.getMinutes());
      let ss = formatHandle(date.getSeconds());

      let w = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      let week = w[date.getDay()];

      this.date = YYYY + sDate + MM + sDate + DD + ` ${week}`;
      this.time = hh + sTime + mm + sTime + ss;

      function formatHandle(value) {
        if (value >= 0 && value < 10) return "0" + value;
        else return value;
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>
<style lang="scss" scoped>
#clock {
  font-family: "Share Tech Mono", monospace;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    text-align: center;
    .date {
      font-size: 28px;
      letter-spacing: 2px;
      display: inline-block;
      padding-bottom: 10px;
    }
    .time {
      letter-spacing: 6px;
      font-size: 80px;
    }
  }
}
</style>

6.修改项目的package.json文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib ./src/package/index.js --name volodyaui --dest volodyaui"
  },

 package.json文件

{
  "name": "volodyaui",
  "version": "0.1.0",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib ./src/package/index.js --name volodyaui --dest volodyaui"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

利用了vue-cli的构建方法，构建单独的入口
-- target lib 关键字 指定打包的目录 后面可以接上entry打包入口

-- name 打包后的文件名字
-- dest 打包后的文件夹的名称

7.打包开发好的组件库 

npm run build

 打包成功后会在项目根目录下生成volodyaui文件夹

 8.上传打包好的组件库代码

 终端进入刚打包成功生成的volodyaui文件夹目录下

 在该目录下，初始化package.json文件目录

作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:

组件库上传npm需要按照npm规则来编写package.json。

npm init -y

 修改刚生成的package.json文件

  "keywords": [
    "MyButton",
    "MyCloc",
    "MyCustomchart"
  ],
  "author": "",
  "license": "MIT",
  "private": false,
  "homepage": "https://github.com/1t1824d/volodyaui", 
  "bugs": {
    "url": "https://github.com/1t1824d/volodyaui"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/1t1824d/volodyaui"
  },

{
  "name": "volodyaui",
  "version": "1.0.0",
  "description": "",
  "main": "volodyaui.common.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "MyButton",
    "MyCloc",
    "MyCustomchart"
  ],
  "author": "",
  "license": "MIT",
  "private": false,
  "homepage": "https://github.com/1t1824d/volodyaui", 
  "bugs": {
    "url": "https://github.com/1t1824d/volodyaui"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/1t1824d/volodyaui"
  },

  "dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.3.1",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  }
}

 

npm login（登录）

npm login

注意：

1. 输入密码时，默认是不显示的，正常输入就行
2. npm whoami 可以测试当前是否是登录

测试当前是否是登录 

npm whoam

 npm publish (发布)

npm publish

 注意：
1.私有包@开头的，发布时需要添加 --access public

npm publish --access public

 【特别提醒】：确保本地源服务是 registry.npmjs.org，国内大家都喜欢使用taobao镜像源，但是发布不能发到该服务器上。本人使用 nrm 工具进行镜像源的管理和切换。即需要把组件库发布到哪个npm镜像仓库，就需要把当前使用的源切换到哪个npm源。

9.查看刚发布到私有仓库的组件库

10.安装刚发布成功的UI组件库 

 安装

npm install volodyaui

 引入

import volodyaui from "volodyaui"
import "volodyaui/volodyaui.css";
Vue.use(volodyaui)

使用

  <my-button disabled>222</my-button>
  <my-button>333</my-button>
  <my-clock textColor="red"></my-clock>

浏览器查看

volodyaui:GitHub - 1t1824d/volodyaui