制作npm，上传和拉取

制作npm包

安装@vue/cli

npm install -g @vue/cli

构建项目

vue create my-vue2-app

创建vue组件

在components目录下新建my-comp.vue组件

<script>
export default {
  name: "my-comp"
}
</script>

<template>
<div>
  我是一个测试组件
</div>
</template>

<style scoped>

</style>

创建index.js,导出组件

import myComp from "./my-comp.vue"; // 引入组件

const component = { // 挂载组件
    install(Vue){
        Vue.component(myComp.name, myComp);
    }
}

if (typeof window !== "undefined" && window.Vue) { // 判断环境
    window.Vue.use(component);
}

export default component;

修改package.json组件信息

{
    "name": "my-comp", // 组件名称
    "version":"0.1.0", // 版本
    "description": "my test comp", // 组件描述
    "license": "MIT", // 授权
    "private": false, // 是否公共组件
    "main": "src/components/index.js", // 入口js，配置上面的js
    "files": [ // 打包后保留的文件内容
        "dist",
        "src/components"
    ]
}

新增配置webpack.config.js文件

const path = require('path');

module.exports = {
    entry: './src/components/index.js', // 入口文件
    output: {
        path: path.resolve(__dirname, 'dist'), // 输出路径
        publicPath: '/dist/',
        filename: 'index.min.js',
        library: 'my-comp',
        libraryTarget: 'umd',
        umdNamedDefine: true,
    }
};

执行打包命令

npm pack

本地使用包

将打包出来的.tgz文件放到项目根目录

然后 npm install ./xxx.tgz

发布npm包到仓库http://x.x.x.x:8081/repository/myrep

登陆

npm adduser --registry=http://x.x.x.x:8081/repository/myrep

输入账号...admin
输入密码...xxxxxx
输入邮箱...xxxx@qq.com

推送

npm publish --registry=http://x.x.x.x:8081/repository/myrep

下载包到项目使用

在根目录创建.npmrc文件

设置仓库

registry=http://x.x.x.x:8081/repository/myrep

安装依赖

npm install my-comp