1. Project Overview

HaloE Mobile Cloud Frontend Component Library is a Vue-based desktop component library designed for frontend engineers.

Based on the design values of [Universality], [Diversity], [Openness], and [Coexistence], HaloE aims to establish an enterprise-level design system. It provides a unified frontend component library that complies with Mobile Cloud's design standards, improving development efficiency and reducing the complexity of page implementation.

2. Open Source License

Licensed under the MulanPubL-2.0 open-source license.

3. Screenshots

Source: HaloE Official Website

4. Feature Overview

Product Positioning

The Mobile Cloud HaloE Frontend Component Library is a Vue-based desktop component library designed for frontend developers. It improves development efficiency, reduces development complexity in complex scenarios, and simplifies page implementation.

A foundational component library based on a unified frontend technology architecture, ensuring a highly consistent online experience across all Mobile Cloud products.

HaloE Implementation Goals and Approach

• Historical Accumulation Closely Aligned with the Company's Cloud Transformation. After 7 years of development and accumulation, Mobile Cloud has established a well-developed ecosystem and management mechanism for its design component libraries. Currently, it includes a WEB component library, a WEB business template library, a mobile component library, a mobile business template library, an ICON component library, and a chart component library. At present, the open-source offering is the desktop VUE3.0 basic component library. Other component libraries will be open-sourced gradually in the future.

• Collaborative Development and Reduced R&D Costs. Front-end development involves a lot of repetitive work. Different departments have their own processes and methods for taking requirements through to final implementation. Sharing design and development deliverables improves efficiency and enables effective collaboration within product teams.

• Strengthening Internal and External Communication. Product managers, developers, and designers each have their own understanding of the same requirements. Establishing unified standards and communicating using a common language helps build consensus and improve communication efficiency.

• Improving Product Consistency. Using standardized components improves consistency across the entire product, enhances the user experience, reduces user learning costs, and helps establish a unified brand identity and improve product quality.

Product Status

The current open-source version is 3.0. After years of development and refinement, it has been used by more than 100 products within the company, with multiple internal departments gradually adopting it. It offers stable performance and high fidelity to product prototypes, making it fully suitable for production environments.

5. Tech Stack

Installation Guide

1. Installation

2. Global Import

/*
In main.js
*/
import {createApp} from 'vue'
import App from './App.vue'
import Haloe from '@haloe-design/haloe'
import '@haloe-design/haloe/dist/styles/haloe.css'

createApp(App).use(Haloe).mount('#app')

Project Initialization

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

Directory

├── build/ # Build Scripts
├── dist/ # Build Output Files
├── docs/ # Component API Documentation
├── examples/ # Component Demo Showcase
├── src/ # Source Code Paths
│ ├── components/ # Components
│ ├── directives/ # Style Directives
│ ├── locale/ # Multilingual Support
│ ├── mixins/ # Common Inherited Methods
│ ├── untils/ # Utility Methods
│ ├── styles # Styles
│ │ └── color/ # Color-Related
│ │ └── common/ # Global Styles
│ │ └── components/ # Component Styles
│ └── index.[j,t]s[x] # Application Entry Script
├── types/ # Declaration Files for Individual Components
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .gitattributes
└── [j,t]sconfig.json
├── tslint.json
├── vite.config.js # Build Configuration
├── vue.config.js

Extract Shared Styles

Use Variables Consistently for Component Style Values

1. Theme Color Variable Directory: src/styles/theme/default.less

2. Style Variable Directory for Dimensions Beyond Colors, Font Styles, General Border Radius Sizes, and Other Style Variables: src/styles/var.less

Development

Based on the develop branch:

1. If you have fork permissions, fork the repository to your local workspace for development. After completing component development, submit an MR to the public repository's develop branch for review and merging.

See the README.md documentation for details