私有npm库搭建 & Vue npm组件发布

一、私有库搭建

本文私有库在linux中使用docker搭建

• 拉最新镜像
  docker pull verdaccio/verdaccio:latest
• 查看镜像
  docker image ls | grep verdaccio
• 运行容器（普通）
  docker run -it -d --name verdaccio -p 4873:4873 verdaccio/verdaccio
• 查看运行状态
  docker ps -a | grep verdaccio
• 可以对docker中的目录进行映射

创建并进入文件夹目录
mkdir /home/verdaccio && cd $_
创建3个文件夹
storage、conf 、plugins
分别修改权限
chown -R 10001:65533 /home/verdaccio/storage
chown -R 10001:65533 /home/verdaccio/conf
chown -R 10001:65533 /home/verdaccio/plugins

• 映射文件夹运行命令：

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

同样使用 docker ps -a | grep verdaccio 查看运行状态

成功后在本机ip:4873可看到私有库页面

二、vue发布npm库

创建工程

• vue create example
• 在src中创建package文件夹
• package中新建index.js 和 example文件夹
• 在example文件夹中写好你的组件

在本地调试组件库

• 在组件库的package.json中修改build命令
  "build": "vue-cli-service build --target lib ./src/package/index.js --name dist --dest dist"

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

• 打包

npm build 后会产生一个dist文件夹
cd dist
npm init -y 创建package.json

• 在其他项目中引入
  npm install <刚刚生成的dist库路径>

配置入口

• 在index.js中引入组件

import xxxView from "@/package/example/xxx.vue"
import yyyView from "@/package/example/yyy.vue"
const coms = [xxxView,yyyView]
const install = function (Vue) {
    coms.forEach(com => {
        Vue.component(com.name, com)
    })
}
if (typeof window != "undefined" && window.Vue) {
    window.Vue.use(comment)
}
export default install

发布

• npm set registry ip:4873/
• npm adduser --registry ip:4873/

npm notice Log in on ip:4873/
Username: 输入用户名
Password: 输入密码
Email: (this IS public): 输入邮箱
设置完成后：Logged in as 你的用户名 on ip:4873/.

• 查看当前用户 npm whoami 或 npm whoam
• 发布库 npm publish --registry ip:4873/

使用你的私有库

• 在根目录创建.npmrc文件
  写入规则：
  @xxx:registry=ip:4873

xxx开头的库从 ip:4873 中加载

• 项目中直接使用 npm install xxx