npm组件库(vue)

1、准备

新建一个vue项目,修改文件目录.

packages文件下存放封装的组件,并且新建一个index.js

index.js代码如下

import hmButton from "./HM-Button.vue";
const components = [hmButton]; //组件集合
const install = function (Vue) {
  // 注册所有的组件
  components.forEach((item) => {
    Vue.component(item.name, item);
  });
};
// 如果是直接引入文件,就不用调用Vue.use()
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default { install }; //必须要有导出

vue.config.js配置如下

const path = require("path");
module.exports = {
  pages: {
    index: {
      entry: "examples/main.js", //修改入口文件,便于测试组件
      template: "public/index.html",
      filename: "index.html",
    },
  },

  // 对所有的js做一个高语法版本转低语法
  chainWebpack: (config) => {
    config.module
      .rule("js")
      .include.add(path.resolve(__dirname, "packages"))
      .end()
      .use("babel")
      .loader("babel-loader")
      .tap((options) => {
        return options;
      });
  },
};

以上准备工作完成,此刻可以正常的运行项目!!!

2、打包配置

在package.json中添加lib官网参考

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib packages/index.js"
  },

运行yarn lib进行打包

3、npm部署

同样修改package.json

.npmignore代码

# 忽略目录
examples/
packages/
public/
#忽略指定文件
vue.config.js
babel.config.js
*.map

终端输入 npm login(如果没有账号可以去注册一个注册链接)
登录之后 npm publish进行上传

再次登录搜索

如有不足,欢迎大佬指点一二~~