1.3.17 • Published 11 months ago

@npmxiaowu/h-ui-plus v1.3.17

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

H-ui-Plus

npmxiaowu-admin是基于 Vue3.3、TypeScript、Vite4、Pinia、Element-Plus 开源的一套后台管理模板；此项目全面使用了H-ui-Plus二次封装基础组件库

介绍

基于 vue3+ ts+ Element-plus 二次封装组件

这是我在学习 Vue3 中基于Element-plus 二次封装基础组件文档，希望对你有用。可查看 详细组件案例文档 预览

npm 方式安装使用

pnpm i @npmxiaowu/h-ui-plus

全局注册使用

前提条件：使用项目必须全局注册 Element-plus组件库

// 在main.js中按下引入
import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "element-plus/theme-chalk/dark/css-vars.css";
import locale from "element-plus/es/locale/lang/zh-cn";
// element-plus图标
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import TuiPlus from '@npmxiaowu/h-ui-plus'
import '@npmxiaowu/h-ui-plus/lib/style.css'
const app = createApp(App)
// 注册所有图标
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
  }
  // 注册ElementPlus
  app.use(ElementPlus, {
    locale // 语言设置
    // size: Cookies.get('size') || 'medium' // 尺寸设置
  });
app.use(TuiPlus)
app.mount('#app')

按需引入

// 在main.js中按下引入
import '@npmxiaowu/h-ui-plus/lib/style.css'
// 单个.vue文件引入
<script setup lang="ts">
  import {TDetail, TForm} from "@npmxiaowu/h-ui-plus"
</script>

全部组件如下

组件名称说明
TLayoutPage布局页面
TLayoutPageItem布局页面子项
TAdaptivePage一屏组件（继承TTable 及 TQueryCondition 组件的所有属性、事件、插槽、方法）
TQueryCondition条件查询组件
TTable表格组件
Virtualized TTable虚拟列表
TForm表单组件
TSelectTable下拉选择表格组件
Virtualized TSelectTable下拉选择虚拟表格组件
TSelectIcon图标选择组件
TSelect下拉选择组件
TDetail详情组件
TButton防抖按钮组件
TStepWizard步骤条组件
TTimerBtn定时按钮组件
TModuleForm模块表单/详情组件
TDatePicker日期选择器组件
TRadio单选组件
TCheckbox多选组件
TChart图表组件
TTabs标签页组件
TSelectIcon图标选择组件

Use CDN in Project(暂不支持)

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/@npmxiaowu/h-ui-plus/lib/style.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="https://unpkg.com/@npmxiaowu/h-ui-plus@latest"></script>
</head>

h-ui-plus Volar 组件类型提示

// 需要在使用的项目的tsconfig.json文件中添加以下
compilerOptions：{
  "types": [
      "@npmxiaowu/h-ui-plus/components.d.ts",
    ],
}

Vue3 + Vite项目中安装引入报如下错误的解决方法

把项目的vite版本升级到4+

安装依赖

注意: 本地环境版本最好安装 Node.js 16.x+、pnpm 7.x+

npm install -g pnpm

# 安装依赖
pnpm install --registry=https://registry.npmjs.org/
>pnpm config get registry 查看当前指向源

# 如果安装依赖失败，可以尝试使用淘宝镜像  --registry=https://registry.npmmirror.com/
>pnpm config set registry https://registry.npmmirror.com/ 切换淘宝镜像源
>pnpm install

本地运行 vuepress 中组件文档

// docs项目(文档demo示例)基于vue3+vite项目
npm run docs:dev

微信交流群

目前微信群已超过 200 人，需要加微信好友(请备注 H-ui-Plus)，拉大家进群

微信二维码

Git 提交规范

  • ci: ci 配置文件和脚本的变动;
  • chore: 构建系统或辅助工具的变动;
  • fix: 代码 BUG 修复;
  • feat: 新功能;
  • perf: 性能优化和提升;
  • refactor: 仅仅是代码变动，既不是修复 BUG 也不是引入新功能;
  • style: 代码格式调整，可能是空格、分号、缩进等等;
  • docs: 文档变动;
  • test: 补充缺失的测试用例或者修正现有的测试用例;
  • revert: 回滚操作;
element-uielement-plusvitevite3vitepressvuevue3h-uih-ui-plusnpmxiaowu二次封装组件封装组件components
idbspark-md5
1.3.17

11 months ago

1.3.16

11 months ago

1.3.15

11 months ago

1.3.14

11 months ago

1.3.13

12 months ago

1.3.12

12 months ago

1.3.11

12 months ago

1.3.10

12 months ago

1.3.9

12 months ago

1.3.8

12 months ago

1.3.7

1 year ago

1.3.6

1 year ago

1.3.5

1 year ago

1.3.4

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.2.9

1 year ago

1.2.8

1 year ago

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.0

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.4.20

1 year ago

1.4.19

1 year ago

1.4.18

1 year ago

1.4.17

1 year ago

1.4.16

1 year ago