hlg-ui

欢乐逛 UI

https://ui.huanleguang.com

Quick Start

Install

npm install hlg-ui

Usage

import Vue from 'vue';
import HLGUI from 'hlg-ui';
import 'hlg-ui/lib/hlg-ui.css';

Vue.use(HLGUI);

Custom Style

HLGUI 使用 Sass 编写，如果你的项目也使用了 Sass，那么可以直接在项目中改变 HLGUI 的样式变量。

$--color-primary: #d92424;
$--color-primary-light-1: #F55252;
$--color-primary-light-2: #FFEEEE;

@import "~hlg-ui/packages/stylesheet/index.sass";

CDN

目前可以通过阿里 CDN 在页面上引入 js 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet" href="//alicdn.huanleguang.com/package/hlg-ui@0.22.2/index.css">

<!-- 引入组件库 -->
<script src="//alicdn.huanleguang.com/package/hlg-ui@0.22.2/index.js"></script>

Development

1. 安装依赖

npm i

2. 本地开发

npm run dev

3. 单元测试

npm run test

4. 打包并发布

将会自动同步到 npmjs 上

npm run npm-publish

相关链接

🔗 线上

🔗 预发

⛱ TeamCity

🎨 设计稿

5. 更新图标

目前图标库使用的地址是 https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2264946 【前端-欢乐逛图标库】

1. 修改 /src/create-icon.js 文件下的 ICON_FONT_URL 地址

2. 新增 /docs/changelog.md 文件下的 操作记录

3. 修改/package.json 文件下的 version 版本

npm run update:icon