前言：打包自己的ui组件库到npm仓库，我们就可以在新项目里面使用自己写过的组件，就不用重复码组件！

1.首先新建一个新的vue项目。

vue create projectName //项目名

2.新建一个packages文件夹，

这个文件夹是用来保存组件，所有组件都会放于这个文件夹里面。packages文件夹下面需要一个index.js,这个文件的组要作用是对所有封装的组件进行整合，并且导出。

index.js代码如下

import myButton from './myButton/index'
import testInput from './testInput/index'
 //组件列表
const components = [
    myButton,
    testInput
];
 
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否可以安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component));
};
 
// 判断是否是直接引入文件
if (typeof window.Vue !== "undefined" && window.Vue) {
    install(window.Vue);
}
 
export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    myButton,
    testInput
}

3.然后每个组件单独一个文件夹src和一个index.js

该index.js 是为了单组件导出，和使用时的按需引入。

index.js代码如下

import testInput from './src/testInput.vue'
 
// 支持按需引用
testInput.install = function (Vue) {
  Vue.component(testInput.name, testInput);
};
 
export default testInput;

testInput.vue 代码如下

<template>
    <input type="text">
</template>
<script>
    export default {
        name: 'testInput',
    }
</script>

4.再添加 .npmignore 文件

文件黑名单设置如下

examples/
packages/
public/
vue.config.js
jest.config.js
babel.config.js
*.map

5.把原来根目录的src文件夹改名为example

该目录是为了测试组件，当我们写完组件可以在这边引入并测试。在examples文件下Home.vue 引入我们写的组件，并在mian.js引入组件：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>\
    <myButton bgColor="red">111</myButton>
    <testInput></testInput>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'Home',
  components: {
    HelloWorld
}
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import  myUi  from '../packages/index'

Vue.config.productionTip = false
Vue.use(myUi)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

6.在整个文件跟目录添加一个vue.config.js文件

const path = require("path");
module.exports = {
    pages: {
        index: {
            entry: "examples/main.js", // js入口文件修改
            template: "public/index.html",
            filename: "index.html"
        }
    },
    chainWebpack: config => {
        // 重新设置目录别名
        config.resolve.alias
            .set("@", path.resolve("examples"))
            .set("~", path.resolve("packages"));
        // 使 examples及packages目录下的js文件都加入编译
        config.module
            .rule("js")
            .include.add("/packages")
            .end()
            .include.add("/examples")
            .end()
            .use("babel")
            .loader("babel-loader");
    },
}

然后再执行npm run serve 就可以看到我们的组件了

7.打包编译

在package.json里面的编译里里面新加一个lib打包命令，具体代码如下：

 "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name demo1 --dest lib packages/index.js"
  },

--target : 构建目标，默认为应用模式。这里修改为 lib 启用库模式。 --dest : 输出目录，默认 dist 。这里我们改成 lib [entry] : 最后一个参数为入口文件，默认为 src/App.vue 。这里我们指定编译 packages/index.js 组件库目录。然后就执行npm run lib

然后在package.json 里面的 name 为我们组件的名称，我们后续install 也是直接install 这个name，version 为当前的版本号，每次发布前都有修改版本号，不然会报错。 private 要改为false。main 要改成lib 里面的对应的 ***.unm.js

8.注册npm，然后上传到npm

注册的话就直接 www.npmjs.com/ 进入官网注册然后在项目控制台上执行设置npm源

npm config set registry http://registry.npmjs.org

再执行

 npm login

然后按要求输入注册的账号密码和邮箱最后执行

npm publish

过几分钟重新打开npm官网你就可以看到你的组件了，大功告成！

2022还有没有自己的组件库？