私有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.jsexample文件夹
  • 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 whoaminpm whoam
  • 发布库 npm publish --registry ip:4873/

使用你的私有库

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

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

  • 项目中直接使用 npm install xxx
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容