npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@haloe-design/haloe

v3.5.1-alpha.5

Published

HaloE Design设计拥抱无限可能

Downloads

11

Readme

HaloE是什么?

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

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

产品定位

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

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

HaloE 目标实现思路

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

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

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

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

产品现状

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

安装教程

  1. 安装
npm install -S @haloe-design/haloe
  1. 全局引入
/*
在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

三、开发

基于develop分支:

推荐fork至私有仓库开发,组件开发完成后提pr至公共仓库develop分支

四、提交

commit日志规范:

feat: 新功能
fix: Bug 修复
perf: 性能优化
improve: 改进
wip: work in process
docs: 文档更新
style: 代码的格式,标点符号的更新
refactor: 代码重构
test: 测试更新
build: 构建系统或者包依赖更新
ci: CI 配置,脚本文件等更新
chore: 非 src 或者 测试文件的更新
revert: commit 回退
  • 不涉及组件源码的提交不可选 feat 和 fix(更新日志仅展示 feat 和 fix 的提交日志)
  • Description 里填写本次提交涉及的组件
  • Jira 后填写 jira 号或者 issue 号

举例:

fix: button组件大小样式问题

Code Source From: Self Code
Description: button
Jira: #I9R1XU

抽取公共样式

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

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

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

开发组件(以radio为例)

自动创建

一、通过npm link 自定义指令

自定义指令入口文件:/build/bin/new-cli.js, package.json 已经配置了bin 指令

  • 执行指令 npm link 创建软链

  • 执行指令 haloe new <component-name> [组件中文名称] 自动创建新组件:

    haloe new radio 单选框

二、借助 make 指令

通过 'make new radio 单选框' 快速自动化创建组件必要的文件和配置,自动化配置脚本文件:/build/bin/new.js

make是GNU命令,Mac系统自带,Windows 操作系统需要安装

推荐Windows安装make的两种方式:

1、通过Chocolatey安装。首先,需要安装此程序包管理器Chocolatey。安装完成后,通过指令全局安装make:

choco install make

2、安装MinGW,然后执行以下操作:

copy c:\MinGW\bin\mingw32-make.exe c:\MinGW\bin\make.exe

或在PATH中创建指向实际可执行文件的链接。在这种情况下,如果更新MinGW,则不会删除链接:

mklink c:\bin\make.exe C:\MinGW\bin\mingw32-make.exe

安装完成,通过make -v 验证是否成功,然后输入指令自动创建新组件radio:

make new radio 单选框

手动创建

一、新建组件目录

1、在src/components/目录下新建radio组件目录(目录名称一般以组件名称命名),radio目录下包含index.js文件和radio.vue文件,其中radio.vue文件用来开发组件相关功能,index.js文件主要是通过exportradio组件抛出。

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>

template中使用:

<template>
    <radio-md class="markdown-body"></radio-md>
</template>

四、typs类型定义

1、在types/下定义radio.d.ts兼容ts,并在haloe.components.d.ts中加入export { Radio, RadioGroup } from './radio';

五、总结

到此,基本一个组件的开发过程基本如上,如有遗漏请找相关人员反映沟通。

六 、commit 日志生成方式

npm run changelog

生成:dataFeat.json、dataFix.json、dataOther.json和CHANGELOG.md四个文件

在build/build-log.js中,还可以新增相关函数,用于提取commit信息

  node ./logs.js

在log.js中,可以添加相关函数,处理生成的,dataFeat.json、dataFix.json、dataOther.json,方便用于组件库文档的编写

输入图片说明