不知不觉, 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组件库越来越好。

相关链接