docs: vue3文档开始页面

vue3文档开始页面

.vitepress/sidebar/utils.ts

@@ -12,6 +12,7 @@ export default [
     text: 'for-vue3',
     collapsed: false,
     items: [
+      { text: 'Hhttp 网络请求', link: '/for-vue3/utils/Hhttp' },
       { text: 'vite-plugin-h-uni-build', link: '/for-vue3/utils/vite-plugin-h-uni-build' },
     ],
   },

.vitepress/theme/custom.css

@@ -15,6 +15,7 @@
   --shadow-3: rgba(0, 0, 0, 0.12);
 
   --vp-layout-max-width: 1460px;
+  --vp-code-block-bg: #292b30;
 }
 
 .dark {

README.md

@@ -70,8 +70,9 @@ npm run h-uni
 ```vue
 <script>
 import { HTab } from 'h-uni/dist/for-vue2'
+
 export defaut {
-  components:{ HTab }
+  components : { HTab }
 }
 </script>
 ```
@@ -88,7 +89,7 @@ const reqest = new Hhttp
 
 ### 挂载全局工具
 如果您需要频繁的使用`h-uni`工具,不想频繁的进行繁琐的导入过程，您可以使用挂载全局工具。
-```js
+```js{4,6}
 // main.js
 import Vue from "vue";
 import App from "./App.vue";
@@ -154,7 +155,7 @@ module.exports = {
 
 不推荐此种方式注册全局组件，原因详见：[easycom组件规范](https://uniapp.dcloud.net.cn/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83)
 
-```js
+```js{4,6}
 // main.js
 import Vue from "vue";
 import App from "./App.vue";
@@ -207,14 +208,138 @@ new Vue(App).$mount();
 已经提上日程，最晚2099年之前支持
 
 ## vue3项目配置
-已经提上日程，最晚2099年之前支持
+
 ### 按需导入
-已经提上日程，最晚2099年之前支持
+
+如果您只是需要`h-uni`中的部分功能，而不想安装全部功能，您可以使用按需导入的方式。
+
+```vue
+<script setup>
+import { HTab } from 'h-uni/dist/for-vue3'
+</script>
+```
+
+```js
+import { Hhttp } from 'h-uni/dist/for-vue3'
+const reqest = new Hhttp
+```
+
+
+:::tip 温馨提示
+部分组件或工具因其特殊性，按需导入方式有所不同，请以组件和工具实际文档为准。
+:::
+
 ### 挂载全局工具
-已经提上日程，最晚2099年之前支持
+
+如果您需要频繁的使用`h-uni`工具,不想频繁的进行繁琐的导入过程，您可以使用挂载全局工具。
+```js{4,8}
+// main.js
+import { createSSRApp } from 'vue';
+import App from './App.vue';
+import { installUtils } from 'h-uni/dist/for-vue3'
+
+export function createApp() {
+  const app = createSSRApp(App);
+  installUtils(app)
+  return {
+    app,
+  };
+};
+```
+在组件内可使用`this.$h`随时随地的访问`h-uni`全部工具
+
+
 ### 挂载全局组件
-已经提上日程，最晚2099年之前支持
+
+如果您需要频繁的使用`h-uni`组件,不想频繁的进行繁琐的导入过程，您可以使用挂载全局组件。
+
+您可以选择使用两种不同的方式挂载全局组件：
+- **使用`uniapp`的`easycom`组件模式**
+
+更推荐使用此方法，原因详见：[easycom组件规范](https://uniapp.dcloud.net.cn/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83)
+
+此配置需要在项目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": [
+		// ......
+	]
+}
+```
+
+::: tip 温馨提示
+
+您可以同时使用两种模式，不建议这样做，因为可以会有命名冲突的问题
+
+:::
+
+- **使用`Vue`自身的方法注册组件**
+
+不推荐此种方式注册全局组件，原因详见：[easycom组件规范](https://uniapp.dcloud.net.cn/component/#easycom%E7%BB%84%E4%BB%B6%E8%A7%84%E8%8C%83)
+
+```js{4,8}
+// main.js
+import { createSSRApp } from 'vue';
+import App from './App.vue';
+import { installComponents } from "h-uni/dist/for-vue3";
+
+export function createApp() {
+  const app = createSSRApp(App);
+  installComponents(app)
+  return {
+    app,
+  };
+};
+```
+
+在组件内可以直接使用标签名称，如：`<HTab></HTab>`或者`<h-tab></h-tab>`访问组件
+
 ### 获得语法提示(VSCode+Volar)
-已经提上日程，最晚2099年之前支持
+
+`VSCode`+`Volar`可以在编辑vue代码时获得完整的`Vue语法提示`、`模板内组件属性事件提示`、`代码高亮`、`代码格式化`、`分割左右屏幕`...
+
+- **按需导入**
+
+ 每个组件或功能的同级目录均存在其对应的`d.ts`类型文件，按需导入时可自动获得该组件或工具的ts类型支持（语法提示）。
+
+- **获得全局 组件/工具 类型支持**
+
+ 组件类型声明文件：`h-uni/dist/for-vue3/globalComponents.d.ts`
+
+ 工具类型声明文件：`h-uni/dist/for-vue3/globalUtils.d.ts`
+
+ 在项目根目录的`jsconfig.json`或者``tsconfig.json``文件中`compilerOptions.types`字段中增加全局需要的类型声明文件目录
+ ```jsonc
+ /// jsconfig.json
+ {
+   "compilerOptions": {
+     "types": [
+        //...
+        "h-uni/dist/for-vue2/globalComponents.d.ts",
+        "h-uni/dist/for-vue2/globalUtils.d.ts",
+        //...
+     ]
+   }
+ }
+ ```
+
 ### HBuilderX支持
 已经提上日程，最晚2099年之前支持