Before you know it, the HeyUI component library has been released for two years.

From March 12, 2017, to March 12, 2019, I counted 100,000 lines of code.

Not long ago, the number of stars of the project finally broke the 1000 mark and started the journey of 1K + 🎉🎉.

If you don’t know about us, you can visit our official website:www.heyui.top/

If you haven’t given me a Star yet, be sure to go to our Github and light up the Star:github.com/heyui/heyui

At the same time,

On the occasion of this second anniversary, we released an enterprise-level middle and background management system, HeyUI Admin.

About HeyUI – Admin

HeyUI Admin is a mature enterprise application solution that is a mid-back end system based on vue2.0 and HeyUI component libraries.

A link to the

  • github
  • The online preview
  • The document

introduce

In this system, in addition to providing some basic examples, the most important is to provide a standard front-end system architecture template.

If you are a senior front end engineer, welcome to experience and give us suggestions.

If you are a front-end beginner, you can learn how to complete a complete front-end architecture design from this system.

What exactly does the admin system contain?

The system structure

-js-common/general-ajax/encapsulate axios-request/encapsulate all requests -utils/general-method - model/js model -config/config - router-config / Route configuration - heyui-config/heyui configuration - dict-config/dictionary configuration - tree-config/tree configuration - autocomplete-config/autocomplete configuration - Category -config/category configuration - menu-config/System menu configuration - JUE-Components/Common components-filters/Common filters-directives / Common cache - vuex-store-CSS-app. less/all style references for system - common.less/style used globally - frame.less/Style used for system framework - fonts/font library - markdown.less/markdown plugin style - overwrite.less/custom override for component library style - richtext-editor.less/richtext editor - var.js/global variable definition, Provided to vue-cli-var.less/global variable definition, Available to hey-cli-components-app. vue/project entry -app/system framework file -common/system common components-common-item/system common item component, For example, some Item displays of the service system - demo-Components/Demo components - error-pages/error page - home/home page - login/login - images/Some images of the systemCopy the code

The above is the basic file structure of our system, and the system will provide a series of documentation to help you understand it.

Architectural aspects

The global variable

The system defines global variables for some basic calls so that they can be called directly in JS or VUE files.

  • Utils: Extends the hey-utils method library and defines public methods in the SRC /js/common/ Utils extension.
  • HeyUI: HeyUI component library
  • Model: Front-end data Model
  • G: Front-end global constants and global events
  • Log: short console.log -> log, hey-log
  • R: References the SRC /js/common/request file, which contains all of the front-end request definitions.

Such as:

let a = 1;
Utils.isString(a)
Copy the code

Path alias

Some basic paths are aliased so that files can be called quickly within a file. Such as:

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

Such as:

import dictConfig from 'js/config/dict-config';
Copy the code

Style definition and management

Contains system component library themes and definitions of global variables, setting patterns for custom styles.

System Parameter Configuration

Centralize a series of parameter configurations and manage configuration documents reasonably and quickly.

-config/configuration - router-config/route configuration - heyui-config/heyui- dict-config/dictionary configuration - autocomplete-config / Autocomplete configuration - category-config/category configuration - tree-config/tree configuration - menu-config/System menu configurationCopy the code

Data request encapsulation

All requests to the system are wrapped in request.js, and methods called in Request.js are wrapped in Ajax.js.

The wrapper for AXIos includes:

  • Mechanism for preventing duplicate requests: With the exception of the GET method, mechanisms have been added to remove duplicate requests.
  • Return result wrapping: All request results are uniformly wrapped, so there is no need to add catch handling when calling the request method.

All requests to the system are wrapped in request.js, which helps maintain the interface.

import Ajax from './ajax';

const Request = {
  // Define the module
  User: {
    // The method below the module
    info() {
      return Ajax.get('/account/info'); }}};export default Request;
Copy the code

Using data models

Related documents: github.com/vvpvvp/mode…

Font library Icon

The icon of this site is maintained through https://icomoon.io.

If you need to add other ICONS yourself, you can extend them through the site tools.

Please refer to the documentation for a detailed tutorial

Included with the development specification and file ESLint standard

Our documentation already provides:

  • Git commit specification
  • System naming rules
  • Single file development specification
  • Eslint and editor plugins

Please refer to:

HeyUI Admin teaching document

Extend the component

In addition to the above basic content, we also integrated some common plug-ins, so that people can according to their own needs, directly use plug-ins.

The chart component

The system integrates the Echarts Chart library, which you can call from the Chart global component.

<Chart :options="data2"></Chart>
Copy the code

Rich text editor

Based on WangEditor V3.1.1.

<RichTextEditor v-model="value"></RichTextEditor>
Copy the code

Code editor

Based on Brace V0.11.1, itself based on the ACE editor.

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

Markdown components

Based on Brace V0.11.1, itself based on the ACE editor.

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

Map component

Based on baidu map API to do the packaging.

<BaiduMap @load="initMap"></BaiduMap>
Copy the code

Sample base page

In addition to the above, the Heyui Admin system also provides some basic system pages. If you are a back-end developer or don’t have a product, you can follow the provided examples and develop your own system directly.

Based on the list

Query list

Based on the form

Details on the form

Personal center

Security Settings

The last

Having said that, there’s much more to discover.

Github:github.com/heyui/heyui…

Looking forward to your star✨✨✨

In the third year of HeYUi, I hope the HeyuI component library gets better and better.

A link to the

  • github
  • The online preview
  • The document