前端如何搭建UI组件库/封装插件(从零到有)

Posted 2021-11-27 gqx-html

需求

因之前是做外包项目居多，经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，

前言

日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库

例如:npm i element-ui -S, npm install vux --save

内容

1.vue项目安装(如已安装，可略过此步骤)

全局安装webpack

npm install webpack -g 或者 npm install -g webpack

 

安装vue-cli

npm install --global vue-cli //vue-cli2 # OR npm install -g @vue/cli //vue-cli3 # OR yarn global add @vue/cli //vue-cli3

 

2.新建组件

在项目中找到src/components下新建input.vue组件

<template>
  <div class="about">
    <input :type="typeInput" @change="inputChange" />
  </div>
</template>

<script>
export default {
  props: {
    typeInput: String
  },
  methods: {
    inputChange(val) {
      this.$emit("change", val);
    }
  }
};
</script>

 

 

 

3.新建components/index.js

import Vue from "vue";
import Input from "./input/index.vue";

const Components = {
  Input
};

Object.keys(Components).forEach(name => {
  Vue.component(name, Components[name]);
});

export default Components;

 

4.修改package.json

{
  "name": "@npm官网中username/项目名",
  "version": "0.1.0", //每次更新库都需要修改版本号，以免影响
  "private": false,  //需要设置为私有
  "main": "./dist/component-library-gao.common.js", //指定该属性后，当引用组件库时，会默认加载main中指定的文件
  "files": [   //引用组件库可以访问的文件
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name component-library-gao ./src/components/index.js",  //直接打包项目中的组件，将此发布到npm上
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
}