🎉 init: 初始化组件库的install配置和tsconfig.json配置；

learn-create-compoents-lib/components/src/Input/Input.vue

@@ -0,0 +1,41 @@
+<!-- 
+	在该组件中简单的定义了组件名、代理了一下v-model，并暴露出了一个方法focus。
+-->
+
+<template>
+	<div class="gie-input">
+		<input v-model="state" ref="inputRef" class="gie-input__control" type="text" :disabled="props.disabled" />
+	</div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import type { InputEmits, InputProps } from "./Input";
+
+defineOptions({
+	name: "GieInput",
+});
+
+const emit = defineEmits<InputEmits>();
+
+const props = withDefaults(defineProps<InputProps>(), {
+	modelValue: "",
+	disabled: false,
+});
+
+const state = computed({
+	get: () => props.modelValue,
+	set: (val) => {
+		emit("update:modelValue", val);
+	},
+});
+
+const inputRef = ref<HTMLInputElement>();
+
+function focus() {
+	inputRef.value?.focus();
+}
+
+defineExpose({
+	focus,
+});
+</script>

learn-create-compoents-lib/components/src/Input/index.ts

@@ -0,0 +1,22 @@
+/**
+ * index.ts — 定义Input组件的入口文件
+ *
+ * 在入口文件中，使用withInstall封装了一下导入的Input组件，并默认导出。
+ *
+ * 且在下面导出了所有类型文件。
+ *
+ * 这个withInstall函数的作用就是把组件封装成了一个可被安装，带install方法的vue插件，
+ * 这个函数我是直接从element-plus项目复制的😂。
+ *
+ * typescript 代码解读复制代码
+ */
+
+import { withInstall } from "../utils/install";
+
+import Input from "./Input.vue";
+
+export const GieInput = withInstall(Input);
+export default GieInput;
+
+export * from "./Input.vue";
+export * from "./Input";

learn-create-compoents-lib/components/src/utils/install.ts

@@ -0,0 +1,16 @@
+import type { App, Plugin } from "vue";
+export type SFCWithInstall<T> = T & Plugin;
+export const withInstall = <T, E extends Record<string, any>>(main: T, extra?: E) => {
+	(main as SFCWithInstall<T>).install = (app): void => {
+		for (const comp of [main, ...Object.values(extra ?? {})]) {
+			app.component(comp.name, comp);
+		}
+	};
+
+	if (extra) {
+		for (const [key, comp] of Object.entries(extra)) {
+			(main as any)[key] = comp;
+		}
+	}
+	return main as SFCWithInstall<T> & E;
+};

learn-create-compoents-lib/components/tsconfig.json

@@ -0,0 +1,13 @@
+{
+	// "extends": "../../tsconfig.json",
+	// 在我们这个项目内，其目录结构有变化，换成别的。
+	// 换成vite项目自主新建的tsconfig.json
+	"extends": "../tsconfig.json",
+	"include": [
+		"src"
+	],
+	"compilerOptions": {
+		"moduleResolution": "node",
+		"baseUrl": "."
+	}
+}