Web开发编程网
分享Web开发相关技术

HeyUI组件库

🎂HeyUI 组件库两周年,中后台管理系统 HeyUI Admin 发布🎉🎉

不知不觉, HeyUI组件库已经发布两年的时间了。

从2017年3月12日,到2019年3月12日,我算了一下,总共写了10万行的代码。

而在不久之前,项目的star数目总算突破1000大关,开启1k+的旅程🎉🎉。

如果你还不了解我们,可以去我们的官网逛一逛:https://www.heyui.top/

如果你还没有给我一颗star,那就一定要去我们的github,点亮star:https://github.com/heyui/heyui

与此同时,

在这两周年之际,我们发布了企业级中后台管理系统 HeyUI Admin。

关于HeyUI-Admin

HeyUI Admin 是一个成熟的企业应用解决方案,是基于 vue2.0 和 heyui 组件库的中后端系统。

相关链接

介绍

在这个系统中,除了提供了一些基础的示例,最重要的是提供了一个标准的前端系统架构模板。

如果你是一个资深的前端工程师,欢迎体验,并给我们输出建议。

如果你是一位前端初学者,可以从本系统中学习如何完成一个完整的前端架构设计。

admin系统到底包含什么?

系统结构

- js
  - common / 通用
    - ajax / 封装axios
    - request / 封装所有的请求
    - utils / 通用方法
  - model / JS模型
  - config / 配置
    - router-config / 路由配置
    - heyui-config / heyui配置
    - dict-config / 字典配置
    - tree-config / 树配置
    - autocomplete-config / autocomplete配置
    - category-config / category配置
    - menu-config / 系统菜单配置
  - vue
    - components / 通用组件
    - filters / 通用filters
    - directives / 通用directives
  - vuex
    - store

- css
  - app.less / 系统的所有样式引用
  - common.less / 全局使用的样式
  - frame.less / 系统框架使用的样式
  - fonts / 字体库
  - markdown.less / Markdown插件的样式
  - overwrite.less / 对于组件库样式做自定义覆盖
  - richtext-editor.less / 富文本编辑器
  - var.js / 全局变量定义,提供给vue-cli
  - var.less / 全局变量定义,提供给hey-cli

- components
  - App.vue / 项目入口
  - app / 系统的框架文件
  - common / 系统的通用组件
  - common-item / 系统的通用Item组件,比如业务系统的一些Item展示
  - demo-components / demo组件
  - error-pages / 错误页面
  - home / 首页
  - login / 登录

- images / 系统的一些图片

以上是我们系统的基础文件结构,系统会提供一系列的说明文档帮助你来理解这些。

架构方面

全局变量

系统对一些基础的调用定义了全局变量,这样就可以在 js 或者 vue 文件中直接调用。

  • Utils: 继承扩展hey-utils方法库,并在 src/js/common/utils 扩展定义公共方法。
  • HeyUI: heyui组件库
  • Model: 前端数据模型
  • G: 前端全局常量以及全局事件
  • log: 简写console.log -> log,hey-log
  • R: 引用 src/js/common/request 文件,包含了前端所有的请求定义。

例如:

let a = 1;
Utils.isString(a)

路径别名

系统对一些基础的路径定义了别名,这样就可以文件中快捷调用一些文件。 比如:

  • js: ‘src/js/’
  • components: ‘src/components/’
  • model: ‘src/js/model’

例如:

import dictConfig from 'js/config/dict-config';

样式的定义以及管理

包含系统组件库主题以及全局变量的定义,关于自定义样式的设定模式。

系统参数配置

将一系列的参数配置集中化,合理快速管理配置文档。

- config / 配置
  - router-config / 路由配置
  - heyui-config / heyui配置
  - dict-config / 字典配置
  - autocomplete-config / autocomplete配置
  - category-config / category配置
  - tree-config / 树配置
  - menu-config / 系统菜单配置

数据请求封装

系统的所有请求都封装在 request.js 文件中,而 request.js 中调用的方法都使用的 ajax.js 封装。

对于axios的封装包含:

  • 防止重复请求机制:除了get方法,其他方法都已经添加了去除重复请求的机制。
  • 返回结果封装:所有的请求结果都是统一封装,所以在调用请求方法的时候,不需要添加catch处理。

系统的所有请求都封装在 request.js 文件中,这样的定义对于接口的维护性有着很好的帮助。

import Ajax from './ajax';

const Request = {
  // 定义模块
  User: {
    // 模块下面的方法
    info() {
      return Ajax.get('/account/info');
    }
  }
};

export default Request;

使用数据模型

相关文档:https://github.com/vvpvvp/model#readme

字体库Icon

本站的icon是通过 https://icomoon.io 维护的。

如果你需要自己添加其他icon,可以通过网站工具做扩展。

具体教程请参考文档

附赠开发规范以及文件eslint标准

我们的文档已经提供了:

  • git commit 规范
  • 系统命名规则
  • 单文件开发规范
  • eslint与编辑器插件

详细信息请参考:

HeyUI Admin 教学文档

扩展组件

除了以上一些基本的内容以外,我们还集成了一些常用的插件,这样大家就可以按照自己的需求,直接使用插件。

图表组件

系统集成了echarts图表库,你可以通过Chart全局组件调用。

<Chart :options="data2"></Chart>

富文本编辑器

基于 wangeditor v3.1.1。

<RichTextEditor v-model="value"></RichTextEditor>

代码编辑器

基于 brace v0.11.1,本身基于ace编辑器。

<CodeEditor v-model="value" :mode="mode"/>

Markdown组件

基于 brace v0.11.1,本身基于ace编辑器。

<MarkdownEditor v-model="value" :options="data2"></MarkdownEditor>

地图组件

基于百度地图的API做的封装 。

<BaiduMap @load="initMap"></BaiduMap>

基础页面示例

除了以上这些内容,heyui admin 系统还提供了一些基础的系统页面,如果你是一个后端开发,或者没有产品的开发人员,可以按照提供的示例,直接开发自己的系统。

基础列表

查询列表

基础表单

表单详情

个人中心

安全设置

最后

说了这么多,还有更多的内容等着你去发现。

github:https://github.com/heyui/heyui-admin

期待你的star✨✨✨

heyui的第三年,希望heyui组件库越来越好。

相关链接

未经允许不得转载:WEB开发编程网 » HeyUI组件库

WEB开发编程网

谢谢支持,我们一直在努力

安全提示:您正在对WEB开发编程网进行赞赏操作,一但支付,不可返还。