不知不覺, HeyUI元件庫已經發布兩年的時間了。

從2017年3月12日，到2019年3月12日，我算了一下，總共寫了10萬行的程式碼。

而在不久之前，專案的star數目總算突破1000大關，開啟1k+的旅程??。

如果你還不瞭解我們，可以去我們的官網逛一逛：www.heyui.top/

如果你還沒有給我一顆star，那就一定要去我們的github，點亮star：github.com/heyui/heyui

與此同時，

在這兩週年之際，我們釋出了企業級中後臺管理系統 HeyUI Admin。

關於HeyUI-Admin

HeyUI Admin 是一個成熟的企業應用解決方案，是基於 vue2.0 和 heyui 元件庫的中後端系統。

相關連結

• github
• 線上預覽
• 文件

介紹

在這個系統中，除了提供了一些基礎的示例，最重要的是提供了一個標準的前端系統架構模板。

如果你是一個資深的前端工程師，歡迎體驗，並給我們輸出建議。

如果你是一位前端初學者，可以從本系統中學習如何完成一個完整的前端架構設計。

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;
複製程式碼

使用資料模型

相關文件：github.com/vvpvvp/mode…

字型庫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：github.com/heyui/heyui…

期待你的star✨✨✨

heyui的第三年，希望heyui元件庫越來越好。

相關連結

• github
• 線上預覽
• 文件