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注意： 宿主机目录 /home/verdaccio/storage 需要设置权限，不然会因为权限问题而导致操作失败。
verdaccio 容器中创建的用户是verdaccio，无法写入主机 root 用户的文件，容器内 verdaccio 使用的 uid 为
10001，gid 为65533，可以在主机修改权限
chown -R 10001:65533 /home/verdaccio/storagechown 10001:65533 /home/verdaccio/conf
宿主机目录映射成功后，会简化很多操作，比如：
在 /home/verdaccio 目录下会创建 storage 目录，如果发布了包，则在此目录下的 data 中能找到对应的包文件夹，可以查看所有上传的npm包，此处也可以直接删除该包； 在 /home/verdaccio 目录下会创建conf 目录,配置文件会映射到此目录下，方便我们需要时修改配置信息。
如果不想做本地目录映射，也可以使用如下命令，拷贝出 verdaccio 镜像的配置文件。
docker cp：在容器和本地文件系统之间，拷贝文件或文件夹。
docker cp verdaccio:/verdaccio/conf/config.yaml /homedocker ps -a
浏览器访问http://ip:4873
nrm是npm的一个镜像源管理工具，可帮助快速切换镜像源，方便管理。在终端（Mac）或者cmd命令窗口（windows）输入命令，全局安装
npm install nrm -g查看版本
nrm -V查看可供选择的源
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 包名，即可安装私有包了。
nrm add myregistry http://133.269.67.128:4873/
nrm ls
nrm use myregistry
vue create volodyaui
在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>
"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 打包后的文件夹的名称
npm run build打包成功后会在项目根目录下生成volodyaui文件夹
终端进入刚打包成功生成的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
注意：
- 输入密码时，默认是不显示的，正常输入就行
- npm whoami 可以测试当前是否是登录
测试当前是否是登录
npm whoam
npm publish (发布)
npm publish
注意：
1.私有包@开头的，发布时需要添加 --access public
npm publish --access public
【特别提醒】：确保本地源服务是 registry.npmjs.org，国内大家都喜欢使用taobao镜像源，但是发布不能发到该服务器上。本人使用 nrm 工具进行镜像源的管理和切换。即需要把组件库发布到哪个npm镜像仓库，就需要把当前使用的源切换到哪个npm源。
安装
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>浏览器查看
