Vue的UI组件库的开发

1.Vue插件的开发

要使用Vue.use(),就要在插件里面暴露一个 install 方法

install里面配合Vue.Component进行全局注册，或者局部注册插件[不使用Vue.use]

2.开发目录

packages下的index.js:

这个是最后插件导出的js文件，用于插件的汇总，提供install方法

packages/button  这是组件库下的一个button组件

   ----index.js  当前button组件的导出文件，提供install方法
   
   ----src  button插件的主目录，提供button组件的具体vue文件，需要的依赖文件等

3.packages/button/src/Button.vue 和 packages/button/index.js

// packages/button/src/Button.vue

<template>
  <button
    @click="handleClick"
    :class="['my-button', { [`my-button-${type}`]: type !== 'default' }]"
  >
    按钮
  </button>
</template>

<script>
export default {
  name: "MyButton",
  components: {},
  props: {
    type: {
      type: String,
      default: "default"
    }
  },
  data() {
    return {};
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    }
  }
};
</script>
<style lang="scss" scoped>
.my-button {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  outline: none;
  border: 1px solid rgb(43, 37, 37);
  background-color: #fff;
  border-radius: 10px;
  &-danger {
    color: white;
    background-color: red;
  }
  &-primary {
    color: white;
    background-color: blue;
  }
  & + .my-button {
    margin-left: 20px;
  }
}
</style>

// packages/button/index.js

import Button from "./src/Button";

Button.install = Vue => {
  Vue.component(Button.name, Button);
};
//提供install方法，可以用于局部注册

export default Button;

4.packages/index.js

// 全局汇总

import Button from "./button";

const components = [Button];  //插件的数组

// 全局注册的install方法，将插件的数组进行Vue的全局注册
const install = Vue => {
  //遍历注册所有的组件
  components.forEach(component => Vue.component(component.name, component));
};

//判断Vue是否存在【这段可以去掉】
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}

//components导出，可以用于局部注册
export default {
  install,
  ...components
};

5. 打包组件库[ 参考 vue-cli-service ] 

--target      app | lib | wc | wc-async (默认值：app)

--dest        指定输出目录 (默认值：dist)

--name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)

{
  "name": "ljinitui", //npm上传的名字
  "version": "0.1.0",  //npm上传的版本
  "main": "lib/LjInitUI.umd.js", //入口，对应打包后的文件,选择umd模式
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lib": "vue-cli-service build --target lib --name LjInitUI --dest lib packages/index.js",  //打包指令
    "lint": "vue-cli-service lint"
  },
  // npm下载的时候会自动安装的依赖
  "dependencies": {
    "core-js": "^3.6.4",
    "vue": "^2.6.11"
  },
  // npm下载的时候不会自动安装，要自己手动安装 npm install
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.1",
    "eslint-plugin-vue": "^6.1.2",
    "prettier": "^1.19.1",
    "sass": "^1.25.0",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
}

打包后的文件目录：

6. npm上传步骤

1. 去npm官方网站进行注册账号

2. 打开命令行界面，输入npm addUser,进行用户的关联

3. npm publish 进行上传