一飞开源
阅读497

[开源]企业级设计体系,基于Vue的桌面端基础组件库,提升效率

一飞开源,介绍创意、新奇、有趣、实用的开源应用、系统、软件、硬件及技术,一个探索、发现、分享、使用与互动交流的开源技术社区平台。致力于打造活力开源社区,共建开源新生态!

一、开源项目简介

HaloE移动云前端组件库是一套为前端工程师提供的基于Vue的桌面端基础组件库。

HaloE基于[普适]、[多元]、[开放]、[共生]的设计价值观,试图建立一套企业级设计体系。提供统一的、符合移动云设计企标规范的前端组件库,提升开发效率,降低页面实现难度。

图片

二、开源协议

使用MulanPubL-2.0开源协议

三、界面展示

图片

图片

图片

来源:HaloE 官网

四、功能概述

产品定位

移动云HaloE前端组件库是一套为前端开发者准备的基于Vue的桌面端组件库。提升开发效率,降低复杂场景下的开发难度,降低页面实现难度。

基于统一前端技术架构的基础组件库,实现各移动云产品间线上体验的高度一致性。

HaloE 目标实现思路

  • 历史积累 紧贴公司云改,经过7年积累,移动云设计组件库生态建设机制完善,目前已有一套WEB端组件库、一套WEB业务模版、一套移动端组件库、一套移动端业务模版、ICON组件库、图表组件库。当前,开源的组件为桌面端VUE3.0基础组件库。后续会陆续开源其他的组件库。

  • 协同开发、降低研发成本 前端开发重复性工作多,从需求到最终方案落地的流程和方法不同部门有各自特征,通过共享设计和开发成果来提升效率,实现产品团队内部高效协同。

  • 强化内外沟通 产品、研发、设计师对于同一需求都有自己的理解。统一规范,使用一种语言沟通,促使达成共识,提高沟通效率。

  • 提升产品一致性 使用统一组件以提高整个产品一致性,以便提升用户体验,减少用户学习成本,同时形成统一的品牌形象,提升产品品质。

产品现状

当前开源版本为3.0版本,经过多年的积累,已在公司内部服务了百余款产品,公司内部多部门在陆续的使用。服务稳定,产品原型还原度高,完全可用于生产环境。

五、技术选型

安装教程

1、安装

2、全局引入

/* 在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')

工程初始化

# install dependencies
npm install

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

# build for production with minification
npm run build

目录

├── build/ # 打包脚本
├── dist/ # 打包文件
├── docs/ # 组件的api文档
├── examples/ # 组件demo展示
├── src/ # 源码路径
│ ├── components/ # 组件
│ ├── directives/ # 样式指令
│ ├── locale/ # 多语言支持
│ ├── mixins/ #公共继承方法
│ ├── untils/ # 工具类方法
│ ├── styles # 样式
│ │ └── color/ # 颜色相关
│ │ └── common/ # 全局样式
│ │ └── components/ # 组件样式
│ └── index.[j,t]s[x] # 应用入口脚本
├── types/ # 各个组件的声明文件
├── README.md
├── package.json
├── .editorconfig
├── .eslintignore
├── .eslintrc.[j,t]s
├── .gitignore
├── .gitattributes
└── [j,t]sconfig.json
├── tslint.json
├── vite.config.js # 打包配置
├── vue.config.js

抽取公共样式

组件样式值请统一采用变量

1、主题色变量目录:src/styles/theme/default.less

2、颜色以外的尺寸大小、字体样式、通用圆角尺寸等样式变量目录:src/styles/var.less

开发

基于develop分支:

1、有fork权限的fork至本地仓库开发,组件开发完成后提mr至公共仓库develop分支,review后合并

详细内容请查看 README.md 文档

六、源码地址

源码下载

关注下面的标签,发现更多相似文章

一飞开源
发布了 篇专栏 · 获取点赞 · 获取阅读

评论

查看更多
相关推荐
关于作者
一飞开源
获得点赞 100
文章被阅读 1000
相关文章