Skip to content

h-uni

主页: https://h-uni.hewxing.cn

仓库: https://github.com/hewx815/h-uni

介绍

这是一个基于uniapp组件库、工具库分别支持uniapp vue2项目、uniapp vue3项目。

提供了完整的TypeScriptJavaScript支持,搭配vscode+Volar可获得完美的类型支持、语法提示

现在市面上的uniapp组件库做的已经非常优秀且全面,如:

  • uni-ui:DCloud官方提供ui库,同时支持vue2vue3、组件丰富、支持nvue
  • uview:支持vue2、组件丰富、文档清晰,支持nvue
  • uview plus:支持vue3、组件丰富、文档清晰,支持nvue
  • ...

h-uni并不是单纯的组件库,他更适合做一个功能补充的库

安装

WARNING

目前只提供 npm方式 安装

安装依赖包

运行以下命令安装h-uni

shell
yarn add h-uni
yarn add h-uni
shell
npm install h-uni
npm install h-uni

安装成功后运行以下命令来查看版本以查看是否安装成功:

shell
yarn h-uni
yarn h-uni
shell
npm run h-uni
npm run h-uni

如果您看到了正确的版本号证明已经成功安装

安装 scss

h-uni内的组件依赖scss,您必须要安装此插件,否则无法正常运行。

shell
yarn add sass sass-loader -D
yarn add sass sass-loader -D
shell
npm install sass sass-loader -D
npm install sass sass-loader -D

挂载组件和函数

插件的安装

通过以下教程安装组件函数,对于插件的安装请参阅详细的插件文档

根据项目类型选择对应的配置方式

vue2项目配置

挂载主库

js
// main.js
import Vue from "vue";
import App from "./App.vue";
import Huni from 'h-uni/dist/for-vue2'

Vue.use(Huni)
new Vue(App).$mount();
// main.js
import Vue from "vue";
import App from "./App.vue";
import Huni from 'h-uni/dist/for-vue2'

Vue.use(Huni)
new Vue(App).$mount();

在组件内可使用this.$h随时随地的访问h-uni全部工具

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行,您可以依据您的组件使用习惯,选择不同的配置:

  • 横线分隔命名的组件(kebab-case)

使用: "^h-(.*)": "h-uni/dist/for-vue2/components+/h-$1/h-$1.vue"

  • 首字母大写命名的组件(PascalCase)

使用: "^H(.*)": "h-uni/dist/for-vue2/components/H$1/H$1.vue"

json
// pages.json
{
	"easycom": {
      // kebab-case
      "^h-(.*)": "h-uni/dist/for-vue2/components+/h-$1/h-$1.vue"
      // PascalCase
      // "^H(.*)": "h-uni/dist/for-vue2/components/H$1/H$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
// pages.json
{
	"easycom": {
      // kebab-case
      "^h-(.*)": "h-uni/dist/for-vue2/components+/h-$1/h-$1.vue"
      // PascalCase
      // "^H(.*)": "h-uni/dist/for-vue2/components/H$1/H$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

温馨提示

1.uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用h-uni的功能。

2.您可以同时使用两种模式,不建议这样做,因为可以会有命名冲突的问题

3.如果您是vue-cli模式的项目,还需要在项目根目录的vue.config.js文件中进行如下配置:

js
// vue.config.js,如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['h-uni']
}
// vue.config.js,如没有此文件则手动创建
module.exports = {
    transpileDependencies: ['h-uni']
}

获得语法提示(VSCode+Volar)

  • 安装 Volar

VSCode+Volar可以在编辑vue代码时获得完整的Vue语法提示模板内组件属性事件提示代码高亮代码格式化分割左右屏幕...

Vue2项目使用Volar插件需要特殊处理,详见:Volar文档Setup for Vue 2章节

vue2+Volar 闭坑指南

  1. vue版本低于2.7的需要安装@vue/runtime-dom(注意使用最新版),才可以使用defineComponent编写vue组件,以获得Volar支持。
  2. 如果是TypeScript项目还要确保TypeScript也为最新版。
  • 获得全局 组件/工具 类型支持

在项目根目录的jsconfig.json或者tsconfig.json文件中compilerOptions.types字段中增加全局需要的类型声明文件目录:h-uni/dist/for-vue2/global.d.ts

jsonc
/// jsconfig.json
{
  "compilerOptions": {
    "types": [
       //...
       "h-uni/dist/for-vue2/global.d.ts",
       //...
    ]
  }
}
/// jsconfig.json
{
  "compilerOptions": {
    "types": [
       //...
       "h-uni/dist/for-vue2/global.d.ts",
       //...
    ]
  }
}

vue3项目配置

挂载主库

js
// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import Huni from 'h-uni/dist/for-vue3'

export function createApp() {
  const app = createSSRApp(App);
  app.use(Huni)
  return {
    app,
  };
};
// main.js
import { createSSRApp } from 'vue';
import App from './App.vue';
import Huni from 'h-uni/dist/for-vue3'

export function createApp() {
  const app = createSSRApp(App);
  app.use(Huni)
  return {
    app,
  };
};

在组件内可使用this.$h随时随地的访问h-uni全部工具

配置easycom组件模式

此配置需要在项目src目录的pages.json中进行,您可以依据您的组件使用习惯,选择不同的配置:

  • 横线分隔命名的组件(kebab-case)

使用: "^h-(.*)": "h-uni/dist/for-vue3/components+/h-$1/h-$1.vue"

  • 首字母大写命名的组件(PascalCase)

使用: "^H(.*)": "h-uni/dist/for-vue3/components/H$1/H$1.vue"

json
// pages.json
{
	"easycom": {
      // kebab-case
      "^h-(.*)": "h-uni/dist/for-vue3/components+/h-$1/h-$1.vue"
      // PascalCase
      // "^H(.*)": "h-uni/dist/for-vue3/components/H$1/H$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}
// pages.json
{
	"easycom": {
      // kebab-case
      "^h-(.*)": "h-uni/dist/for-vue3/components+/h-$1/h-$1.vue"
      // PascalCase
      // "^H(.*)": "h-uni/dist/for-vue3/components/H$1/H$1.vue"
	},
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

温馨提示

您可以同时使用两种模式,不建议这样做,因为可以会有命名冲突的问题

获得语法提示(VSCode+Volar)

  • 安装 Volar

VSCode+Volar可以在编辑vue代码时获得完整的Vue语法提示模板内组件属性事件提示代码高亮代码格式化分割左右屏幕...

  • 获得全局 组件/工具 类型支持

在项目根目录的jsconfig.json或者tsconfig.json文件中compilerOptions.types字段中增加全局需要的类型声明文件目录:h-uni/dist/for-vue3/globa.d.ts

jsonc
/// jsconfig.json
{
  "compilerOptions": {
    "types": [
       //...
       "h-uni/dist/for-vue2/globa.d.ts",
       //...
    ]
  }
}
/// jsconfig.json
{
  "compilerOptions": {
    "types": [
       //...
       "h-uni/dist/for-vue2/globa.d.ts",
       //...
    ]
  }
}

HBuilderX支持

已经提上日程,最晚2099年之前支持