基于和仁设计规范的 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');
一个使用 Vue3、Vite2、TypeScript 开发,可进行个性化主题配置,旨在提供项目开箱即用的、配置式的中后台项目脚手架。
IE / Edge | Firefox | Chrome | Safari |
---|---|---|---|
Edge >=84 | Firefox >=83 | Chrome >=84 | Safari >=14.1 |
Heren Design 遵循 MIT 协议。