hview-ui

Hview UI - A Vue.js 3 UI library 👻

MIT License

Downloads
34
Stars
91

🎃 Intro

Hview is a Minimalism style computer side component library developed based on Vue3, fully embrace Vue3 ecology, maintained by Wuhu Takeoff team.

✨ Features

  • 🚀 Provides 30+ high quality common components

  • 💪 Developed by Chinese people, perfect documentation and logistics support in both Chinese and English

  • 🛠️ Support on demand import, reduce packaging volume

  • 🛠️ Support theme customization

  • 🌍 Support internationalization

  • 🎯 Built in TypeScript, complete type definition files are available

  • 🛠️ Support dark mode

  • 🤺 It's a drill ground. It could be useful

  • 🔐 Ensure over 80% unit test coverage to ensure stability, safety and reliability

📦 Install

npm i hview-plus

🤹‍♀️ Used

// main.ts
import { createApp } from "vue";
import HviewPlus from "hview-plus";
import "hview-plus/theme-chalk/style.css";

import App from "./App.vue";

const app = createApp(App);

app.use(HviewPlus);
app.mount("#app");

Project document:chai-mayor.gitee.io/hview-ui

🤺 Playground

Edit components online at Hview UI Playground

Sometimes, component registration may fail, and you can refresh the page to recover

🥇 Technology stack

Core:vue3 + typescript + less + vite

Submit:husky、commitlint、lint-staged

Genre:eslint、prettier、stylelint、postcss-less

Dir:ls-lint

Document:vitepress

I18n:vue-i18n

Test:vitest、@vue/test-utils、jsdom、c8

CI/CD:gulp、github actions、release-it

🎪 Project case

Project name:Hview-ui

Implied meaning:Usually, the first code to learn programming is Hello World, and it is the first time for us to develop component libraries. Our component libraries are also developed and learned by referring to existing component libraries. view has the meaning of observation and is a homophone with vue, so we combine h and view together. Naming the component library hview-ui means that our new component library will learn the advantages of integrating existing component libraries and hopefully present a good component library project for you.

Logo:

Design:view also means perspective, view. Here, three patterns in different view directions are used to form the solid H

Implied meaning:There are still many imperfections in our component library. We sincerely hope that the majority of developers can use our component library and give us feedback and questions. We will humbly accept and then accept your opinions, and continue to iterate the project that satisfies the developers.

👋 Contributors

Thanks for all their contributions 🐝!

🎑 Join us

By using the fly book scan code to join the development group chat, later in the group to share the knowledge of the development of the component library, how to solve the problems encountered, as well as the development process introduction and so on...

Those who have the ability and ideas can participate in our open source project after completing and submitting the development of the three components according to the introduction

For those who have ideas but don't have the ability at present, we will provide some article materials of component library in the group. We hope you can participate in the development of our project after learning and practicing

Finally, I hope you can make a fortune and give us a free star. Thank you again 😘

Reference article:How do I contribute code to an open source project? - zhihu.com

🌸 Thanks

The project draws on the following projects.

📄 License

MIT License © 2023-PRESENT ChaiMayor

Package Rankings
Top 17.53% on Npmjs.org
Related Projects