关于 HaloE
HaloE前端组件库是一套为前端工程师提供的基于Vue3.0的桌面端基础组件库。HaloE基于普适、多元、开放、共生的设计价值观，建立一套企业级设计体系，提供统一的、符合B端产品设计企标规范的前端组件库，提升开发效率，降低页面实现难度。
组件结构
功能特色
- 组件丰富：HaloE提供了50+基础组件、覆盖多种场景，满足各种功能需求。
- 可访问性强：面向所有人的组件，支持Web内容可访问性指南。
- 专业支持：提供丰富的文档和组件示例，可在一个工作日内对问题进行反馈。
- 支持国际化：满足更广的应用范围。
友好辅助
HaloE支持两种模式切换：默认模式和暗黑模式，它巧妙地结合了Less和CSS各自的优势。这一实现利用了Less强大的自定义变量功能，将不同模式下组件的颜色差异抽象出来，使得在构建过程中能够生成两种不同的CSS主题颜色类型。
优秀案例
一直以来，HaloE专注于探索更高质量的设计体系，旨在解决复杂业务和沟通冗余所带来的用户体验问题，以实现对开发人员和设计师的全面解放。经过近三年的不断迭代和精细打磨，HaloE已为多个项目提供高效且高质量的产品构建流程支持。它是一款真正从实践中孕育而出的产品，并广泛服务于内部业务需求。
云产品官网
云产品官网为客户提供行业领先的云主机/云服务器、云手机、云空间、大数据、人工智能等产品的订退改续等专业服务。
云服务控制台
云服务控制台是管理所有云服务的集合，包括服务总览、资源管理、运维管理、安全管理等。
开发你的第一个组件
手动创建
一、新建组件目录
（1）在src/components/目录下新建radio组件目录（目录名称一般以组件名称命名），radio目录下包含index.js文件和radio.vue文件，其中radio.vue文件用来开发组件相关功能，index.js文件主要是通过export将radio组件抛出。
（2）最后，需要在src/components/index.js文件中将radio组件抛出，例：
`export { default as Radio } from './radio';`
如此，一个新的组件就创建完成了，可以在examples中引入使用。
二、新建样式文件
（1）样式文件存在于src/styles/components下，在该目录下创建radio.less，其中加入raiod组件的相关样式。一般地，公用基础样式存放于：custom.less，相关的基础样式可以在此添加。
（2）最后，同样地，需要在src/styles/components/index.less中将该组件的样式引入，例：
@import "radio"
三、编写examples查看组件
（1）这一步基本是查看自己开发的组件是否能符合UI原型和相应的功能。
（2）首先，需要在examples/routers/中创建组件DEMO：radio.vue，在其中使用radio组件。
（3）之后，在examples/main.js中的路由配置，加入自己组件的路由。
// 路由配置const router = createRouter({
esModule: false,
mode: 'history',
history: createWebHistory(),
routes: [
{
path: '/radio',
component: () => import('./routers/radio.vue')
}
]});
（4）其次，在examples/main.js中配置router-link入口。
<div class="container-nav">
<span><router-link to="/radio">Radio</router-link></span>
</div>
（5）最后，如果开发完成，需要书写文档，此处的文档一般只需要写相关API。在docs/下新建radio.md文件，主要描述相关组件的相关API。当然，相关的MD也要整合到examples中，在examples/routers/radio.vue中，引入MD文档并进行展示。
<script>
import radioMd from '../../docs/radio.md';
export default {
name: 'DemoCheckboxAndRadio',
components: {
radioMd
},
data () {
return {
disabledGroup: '爪哇犀牛',
button1: '北京',
single: true
}
}}
</script>
四、typs类型定义
（1）在types/下定义radio.d.ts兼容ts，并在haloe.components.d.ts中加入export { Radio, RadioGroup } from './radio'。
自动创建
为了方便使用，我们还提供了npm link自定义指令。自定义指令入口文件：/build/bin/new-cli.js，package.json 已经配置了bin 指令。
（1）执行指令 npm link 创建软链；
（2）执行指令 haloe new [组件中文名称] 自动创建新组件；
通过以上命令，就可自动生成：源码结构并导出、样式生成导出、文档API、types基本内容，方便开发。
加入HaloE
HaloE前端组件库已获得Gitee推荐项目，我们热烈欢迎各位开发者和用户参与体验并提供反馈。在HaloE团队看来，每一位用户的意见都值得重视。我们鼓励大家积极踊跃地分享反馈意见，共同建设，一起创造。
目前，HaloE 已经在 gitee 上开源了 Vue2.0、Vue3.0 基础组件库。开源地址如下：
- Vue2.0 开源地址：https://gitee.com/halo-e/haloe?_from=gitee_search
- Vue3.0 开源地址：https://gitee.com/halo-e/haloe-design?_from=gitee_search
小伙伴们可以扫描下方二维码加群与我们反馈沟通哦！
