使用vue-cli+Vue2搭建公共组件库

背景

在开发过程中很多项目中的组件都存在重复编写的情况，这种情况通常都是都去执着于去写业务；组件并未进行抽取，或者同事之前写的组件比较独立；信息未沟通到位；未进行沟通或者分享；然后同事A写了，B不知道；B再去写一个；或者A项目复制到B项目直接进行使用；并未形成组件库；没有公共资产沉淀下来。这样重复造轮子的研发效率较低下。解决这种现状的方法就是积累日常开发的组件，抽取成公共组件；形成通用组件库；避免重复造轮子；提升开发效率！ 那是不是就是说咱们一定要去撸一套组件库，不见得哈。咱们要的是开发效率，目前市场上有很多的开源的组件库；按业务需求自取即可。我所说的是咱们业务中沉淀下来的通用组件，怎么识别可以进行抽取呢？我的经验是在业务项目中使用率2次以上就可以进行抽取了；具体要看实际业务情况；自己斟酌哈；那么下面我们开始进行组件库框架搭建。

使用到的技术及官方网站

Vue2、 Vue-cli、 Vue Router、 ESLint、 Babel、 SASS、 Prettier、 Pnpm

使用vue-cli创建组件库

安装cli

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

进行组件库创建

执行cli创建命令行进行组件库创建，如下图选择最后一个选项进行组件库自定义设置。

选择组件库内置依赖选项：Babel(编译js)、Router(路由)、CSS Pre-processors(css预编译), Linter(js规范检查)，Unit Testing（单元测试）； E2E Testing（E2E测试）。说一下这里为啥要选择路由，选择路由之后；可以使用路由页面来编写组件使用文档。

Vue版本选择，选择Vue2。

是否使用router的历史模式，我们选择yes；css预编译我们这里默认选择dart-sass， Linter代码检查和代码风格格式化我们选择ESLint + Prettier； 选择保存的时候进行ESLint代码检查，在提交的时候进行ESLint代码规范异常处理。

单元测试选择jest，E2E测试选择Cypress；Babel和ESLint配置项放置到哪里？是单独的配置文件，还是直接放到package.json进行配置？建议单独放置，这样可可以更直观的进行配置项配置；我们这里选单独的文件。测试这块自己需要就选择，不需要就不要选。

是否将这些内置依赖项保存到组件库框架内？选择：yes。

组件库初始成功。

新增Prettier格式化文件，解决endOfLine和其它格式问题；记得重新加载vscode窗口。

src目录下删除components文件夹，新建packages组件库文件夹；新建组件FirstComponent

新建FirstComponent组件index.vue

<!--
*@filePath: packages\FirstComponent\index.vue
*@Description: firstComponent
*@Author: Jackson
*@CreateTime: 2022年08月23日 10:51:54
*@UpdateTime: ''
-->
<template>
  <div class="firstComponent">{{ text }}</div>
</template>

<script>
export default {
  name: 'FirstComponent',
  props: {
    text: {
      type: String,
      default: 'FirstComponent'
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.firstComponent {
  font-size: 20px;
  color: #666;
}
</style>

新建FirstComponent组件index.js进行FirstComponent组件挂载注册

/**
 *@filePath: packages\FirstComponent\index.js
 *@Description: index.js
 *@Author: Jackson
 *@CreateTime: 2022年08月23日 11:05:25
 *@UpdateTime:
 **/
import FirstComponent from './index.vue';
FirstComponent.install = function (Vue) {
  Vue.component(FirstComponent.name, FirstComponent);
};
export default FirstComponent;

新建组件库主出口文件index.js

/**
 *@filePath: packages\index.js
 *@Description: 组件库主出口文件
 *@Author: Jackson
 *@CreateTime: 2022年08月23日 11:05:25
 *@UpdateTime:
 **/
import FirstComponent from './FirstComponent';
const components = {
  FirstComponent
};

const install = function (Vue) {
  Object.keys(components).forEach((keys) => {
    Vue.component(keys, components[keys]);
  });
};

if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  version: '0.1.0',
  install
};

配置vue.config.js

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  // css样式独立抽取
  css: {
    extract: true
  },
  transpileDependencies: true,
  configureWebpack: {
    // 组件库编译官方默认配置
    output: {
      libraryExport: 'default'
    }
  }
});

package.json新增编译命令

// vue-cli-service build --target lib 组件库编译命令
// --name 编译后的组件库文件名称
// ./src/packages/index.js 组件库出口文件
"build:lib": "vue-cli-service build --target lib --name vue2-components ./src/packages/index.js --watch",

执行命令进行组件库编译，编译完成在main.js文件进行引用；使用home.vue进行组件验证/编写组件手册。编译完成也可以直接发布到npm进行安装使用

npm run build:lib
 DONE  Compiled successfully in 4001ms                                                                                                                                                                                    11:15:45

  File                               Size                                   Gzipped
  
  dist\vue2-components.umd.min.js    1.98 KiB                               0.97 KiB
  dist\vue2-components.umd.js        9.49 KiB                               2.86 KiB
  dist\vue2-components.common.js     9.04 KiB                               2.74 KiB
  dist\vue2-components.css           0.04 KiB                               0.06 KiB

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import vue2Components from '../dist/vue2-components.umd.min';
import '../dist/vue2-components.css';
Vue.config.productionTip = false;

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

运行效果

代码仓库