HC-Basic介绍和使用指南（组件库系列二）

前端杨雄

已于 2023-05-22 20:07:46 修改

阅读量364

点赞数 19

分类专栏：私有组件库文章标签： vue.js javascript 前端 elementui 前端框架

于 2023-05-18 11:50:41 首次发布

本文链接：https://blog.csdn.net/weixin_40719409/article/details/130736869

版权

私有组件库专栏收录该内容

7 篇文章 3 订阅

订阅专栏

前言

基于VUE + Element UI搭建的basic npm 包，降低项目搭建、开发成本；对element UI内组件进行二次封装，降低组件使用难度；数组、对象、存储、日期等项目开发常用函数集合，并且所有方法已挂载到 VUE 原型上；公共基础样式封装，主题配置等功能

讲组件库的使用不是推荐各位使用我的私有组件库，而且从先从使用层出发才能更好的了解我对整个组件库封装的思路

功能介绍

公共组件
- 二次封装和继承elementUI的部分组件，如form-item、table、dialog、pager等
- 抽离页面多次使用的页面结构或组件形式。增加页面编辑速度，提高开发效率
- 建立后台系统基本公用组件如hc-icon（svg图标）、hc-frame（后台页面架构menu+tabs联动）
公共样式
- 将开发页面的公共样式进行抽离，减少页面私有样式的编写，保持css代码统一性和高维护性
- 内部包含了 block 和 Text 两个模块内容
  - Block
    - Border 边框
    - Cursor 光标类型
    - Display 显示方式
    - flex 弹性盒子布局
    - Float 浮动
    - Position 位置
    - Space 边距
    - Shadow 阴影
  - Text
    - Typography 文字
    - Background 背景
公共内容
- 全局过滤器 - 全局指令 - 项目常用正则 - 数组方法集合 - 对象方法集合 - 日期方法集合
- 公共正则（手机号、邮箱、身份证等常用正则）
- 自定义指令（防抖指令、图片错误指令、复制指令等）
- 常用函数方法，如repeatObjEle：数组中对象元素去重，第一个参数为数组，第二个为去重对象的key

使用指南

npm 包安装方法

npm i hc-basic -S

在vue项目入口文件中

import hcBasic from 'hc-basic'; 
Vue.use(hcBasic);

样式引入有两种方式（*必须引入）

自定义主题引入

该方式引入可以达到通过改动scss变量，更改全局主题样式。可对部分既定sass样式进行配置重定义

在项目scss入口文件中新增一个名为hcConfig.scss文件，并将该文件引入到入口scss文件中

// index.scss 文件
@import 'hcConfig'; // hc-basic 样式重置

2.将以下内容复制到hcConfig.scss文件中即可

$--color-default-hc: #ffffff; // 主题默认色
$--color-primary-hc: #1b86ee; // 主题色
$--color-success-hc: #40c073; // 主题成功色
$--color-info-hc: #8c8c8c; // 主题信息色
$--color-warning-hc: #faad14; // 主题警告色
$--color-danger-hc: #f5222d; // 主题错误色

$--color-text-primary-hc: #161d25; // 默认主题文本颜色
$--color-text-regular-hc: #454f5b; //
$--color-text-secondary-hc: #8c8c8c;
$--color-text-placeholder-hc: #bfbfbf; // 输入框内提示文本颜色
/*
* 边框颜色不同亮度
*/
$--border-color-base-hc: #dcdfe6; //
$--border-color-light-hc: #e4e7ed;
$--border-color-lighter-hc: #ebeef5;
$--border-color-extra-light-hc: #f2f6fc;
// 边距基数
$sideBasic: 4; // padding、margin边距的基数值
$spaceMax: 21; // 边距基数的最大倍数
$--border-radius-base-hc: 4px; // 边框圆角基础值
$--background-color-base-hc: #f5f7fa; // 背景基础颜色值

$colMax: 24; // 24珊格col布局

// 文本字体大小和lineHeight的配合设置
$textList: (
 (
   size: 12,
   line: 20
 ),
 (
   size: 14,
   line: 20
 ),
 (
   size: 16,
   line: 22
 ),
 (
   size: 18,
   line: 24
 ),
 (
   size: 20,
   line: 26
 ),
 (
   size: 28,
   line: 40
 ),
 (
   size: 36,
   line: 50
 )
);
@import '~hc-basic/scss/default/index.scss';
$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
@import '~element-ui/packages/theme-chalk/src/index';

自定义主题切换引入

自定义主题切换引入主要针对项目中需要进行主题切换，可以通过配置一个固定参数来达到动态配置主题的方法

在项目scss入口文件中新增一个名为hcConfig.scss文件，并将该文件引入到入口scss文件中

// index.scss 文件
@import 'hcConfig'; // hc-basic 样式重置

将以下内容复制到hcConfig.scss文件中即可

// 边距基数
$sideBasic: 4; // padding、margin边距的基数值
$spaceMax: 21; // 边距基数的最大倍数
$--border-radius-base-hc: 4px; // 边框圆角基础值
$--background-color-base-hc: #f5f7fa; // 背景基础颜色值

$colMax: 24; // 24珊格col布局

// 文本字体大小和lineHeight的配合设置
$textList: (
  (
    size: 12,
    line: 20
  ),
  (
    size: 14,
    line: 20
  ),
  (
    size: 16,
    line: 22
  ),
  (
    size: 18,
    line: 24
  ),
  (
    size: 20,
    line: 26
  ),
  (
    size: 24,
    line: 32
  ),
  (
    size: 28,
    line: 40
  ),
  (
    size: 36,
    line: 50
  )
);
@import '~hc-basic/scss/theme/theme.css';
@import '~hc-basic/scss/theme/index';
@import '~element-ui/lib/theme-chalk/icon.css';

配置一个存放各个主题变量的js文件，有几个主题就在文件中创建几个key-value

// theme.js
export default {
    default: {
	    // 主题色
        functional: { primary: '#0e927a', success: '#40c073', info: '#8c8c8c', warning: '#ffbe3f', danger: '#e05b5b' },
        // 文本色
        text: { primary: '#202224', regular: '#1A202C', secondary: '#718096', placeholder: '#A6B1BB' },
        // 边框色
        border: { base: '#E1E8EB', light: '#e4e7ed', lighter: '#ebeef5', extraLight: '#f2f6fc' },
        // 阴影颜色
        shadow: '#000000',
        // 其他变量
        other: {},
        // 主题名
        type: 'default'
    },
    blue1: {
        functional: { primary: '#4299A9', success: '#40c073', info: '#8c8c8c', warning: '#ffbe3f', danger: '#e05b5b' },
        text: { primary: '#161d25', regular: '#454f5b', secondary: '#8c8c8c', placeholder: '#bfbfbf' },
        border: { base: '#dcdfe6', light: '#e4e7ed', lighter: '#ebeef5', extraLight: '#f2f6fc' },
        shadow: '#000000',
        other: {},
        type: 'blue1'
    }
};

4.在APP.vue中指定初始化主题

import theme from '@utils/theme.js';
this.$Func.setTheme(theme['default']);

5.通过APP.vue的方法在需要进行主题切换的页面进行主题的切换代码编写

关于刷新之后主题保持选中不变这种小问题就留给各位自行解决了，最简单的就是将当前主题类型保存到store和localstroge里面，每次刷新的时候拿到值重新设置就可以了。相信这些小问题是难不到各位的，所以我就偷个懒不写那么详细了

自定义配置文件引入（可选项）

在使用组件库的过程中，有些时候会因为一个外部的因素导致需要组件库字段的一个适配性。这里我们可以通过加入hcOptions.js配置文件的方式处理这些问题
我们在使用组件库的过程中引入组件库一般都是这样：

Vue.use(hcBasic);
Vue.use(elementUI)

其实Vue.use是支持多参数的，除第一个参数外，后续的参数都会化为插件入参传入到插件内部。通过这样的机制，我们可以让我们的私有组件库变得更加多样性，更好的适配不同的情况

自定义配置文件引入方法

在项目中main.js（入口文件）同级新增一个hcOptions.js文件，在main.js中引入并使用

// main.js 文件
import hcBasic from 'hc-basic';
import hcOptions from './hcOptions';
Vue.use(hcBasic, hcOptions);

将以下内容复制到hcOptions.js文件中即可

import store from './store';
// 该文件为整个项目针对axios的二次封装，将请求拦截器和响应拦截器抛出
import { responseCallback } from './util/axios/axiosCommonFunc';

export default {
	// 对各个组件进行组件库的私有设置
    Components: {
        formItem: {
            labelFontSize: 14, // form项的label字体大小，用来设置label的宽度
            label: 'dictLabel', // 默认select、checkbox、radio的option的label字段
            value: 'dictValue' // 默认select、checkbox、radio的option的value字段
        },
        pager: {
            currentPage: 'pageNo', // 当前页配置字段
            pageSize: 'pageSize', // pager组件page-size字段
            layout: 'total, sizes, prev, pager, next, jumper' // pager组件layout
        },
        table: {
            optionLabel: '操作', // 操作列名称
            noData: require('./assets/images/empty/noData.png') // table数据为空时显示图片内容
        },
        desc: {
            color: {
                label: 'secondary', // 详情组件label字段颜色
                value: 'textPrimary' // 详情组件value字段颜色
            },
            emptyText: '------', // value值为空时显示的内容
            distance: '20' // 每一行之间的间距
        }
    },
    Encrypt: {
        AES: {
            KEY: '1234567812345678', // aes加密-密钥
            IV: '1234567812345678' // aes加密-密钥偏移量
        }
    },
    // 字典值配置
    tCode: {
        path: '/admin/dictDetail/queryList', // tcode请求地址
        key: 'dictCode', // tcode入参字段
        type: 'post', // get post
        cache: true, // 是否缓存处理
        dataType: 'dictType', // ''''
        isNumValue: 0, // '''
        func: res => {
            return res.data;
        }
    },
    // 指令配置
    directives: {
        copy: {},
        errImg: {
            avatarErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/avator.png', // 头像错误图片
            showErr: require('./assets/images/empty/noImage.png'), // 展示错误图片
            // showErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/nofound.png', // 展示错误图片
            upErr: 'https://ocj-erp-frontendonline.oss-cn-shanghai.aliyuncs.com/img/upload-fail.png' // 上传错误图片
        },
        onlyInt: {},
        onlyNumber: {},
        preventShake: {
            time: 800
        },
        watermark: {
            fillStyle: 'rgba(180, 180, 180, 0.2)',
            width: 400,
            height: 200,
            title: '主标题',
            subTitle: '副标题'
        }
    },
    axios: {
    	// 可不用设置，通过proxy进行拦截代理
        ipUrl: '',
        // axios基础配置
        config: {
            baseURL: '/api/v1', //联调
            timeout: 60000,
            retry: 1, // 超时失败时重连一次
            retryDelay: 1000,
            withCredentials: true, // default
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            }
        },
        // 后端定义返回成功参数code
        successCode: undefined,
        // token参数
        token: '',
        // 请求拦截器
        requestCallback: config => {
            config.headers.Authorization = store.getters.getToken;
            config.headers['Content-Type'] = 'application/json';
            return config;
        },
        responseCallback
    }
};

PS:好了，组件库的引入使用就到这里结束了，需要组件库源码和使用文档源码的可通过添加“yweiaimin“获取。（主要是代码放云效了，邀请链接有效期就TMD两天）。在后续的博客里我会详细的讲每一个点的

hc-basic已开源
组件库代码地址：
https://gitee.com/yangxiongasin/hc-basic
组件库文档代码地址：
https://gitee.com/yangxiongasin/hc-docs

对组件库开发有兴趣的可以进QQ群： 617330944大家一起讨论交流

前端杨雄

关注

19
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
8
评论
HC-Basic介绍和使用指南（组件库系列二）

基于VUE + Element UI搭建的basic npm 包，降低项目搭建、开发成本；对element UI内组件进行二次封装，降低组件使用难度；数组、对象、存储、日期等项目开发常用函数集合，并且所有方法已挂载到 VUE 原型上；公共基础样式封装，主题配置等功能公共组件二次封装和继承elementUI的部分组件讲组件库的使用不是推荐各位使用我的私有组件库，而且从先从使用层出发才能更好的了解我对整个组件库封装的思路
复制链接

扫一扫