h-uni

Appearance

h-uni ​

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

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

介绍 ​

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

提供了完整的TypeScript和JavaScript支持，搭配vscode+Volar可获得完美的类型支持、语法提示。

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

  • uni-ui：DCloud官方提供ui库，同时支持vue2和vue3、组件丰富、支持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年之前支持