heren-design-web-vue

基于和仁设计规范的 Vue 组件库，适配桌面端应用，适合在 Vue 3.x 技术栈项目中使用。

🎉 特性

• 适配桌面端交互
• 支持全局以及组件级别的主题配置
  • css variable
  • less variable
• Typescript编写，所有组件类型友好
• 支持暗黑模式及其他主题定制
• 支持按需加载

安装

# npm 
npm install heren-design-web-vue

# yarn (推荐)
yarn add heren-design-web-vue

编辑器提示

安装注册 HerenDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。

推荐安装 volar，并在项目的 tsconfig.json 的 includes 属性中增加node_modules/heren-design-web-vue/global.d.ts，即可实现该效果。

基础使用

推荐使用 Webpack 或 Rollup 等支持 tree-shaking 特性的构建工具，无需额外配置即可实现组件按需引入

import { createApp } from 'vue';
import { Button, Input, Form } from 'heren-design-web-vue';
import App from './App.vue';

// 引入组件库全局样式资源
import 'heren-design-web-vue/es/style/index.css';

const app = createApp(App);
app.use(Button);
app.use(Input);
app.use(Form);
app.mount('#app');

全局引入

import { createApp } from 'vue';
import HerenDesign from 'heren-design-web-vue';
import App from './App.vue';

// 引入组件库全局样式资源
import 'heren-design-web-vue/es/style/index.css';

const app = createApp(App);
app.use(HerenDesign);
app.mount('#app');

Web 最佳实践

HerenDesign Web 脚手架

一个使用 Vue3、Vite、TypeScript 开发，可进行个性化主题配置，旨在提供项目开箱即用的、配置式的中后台项目脚手架。

浏览器兼容性

影响兼容性的因素：

Form 组件使用了 Flexbox gap 特性

Loading 组件使用了 Conical Gradients 特性

Table 组件与 Datepicker 组件使用了 CSS position:sticky 特性

开源协议

Heren Design 遵循 MIT 协议。