✨ feat(app-1): 实现了md组件导入识别vue组件，并提供基础的类型声明。

ruan-cat · Nov 17, 2024 · 9ea098a · 9ea098a
1 parent 8ce06b6
commit 9ea098a
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 10 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -96,5 +96,14 @@
 	"code-runner.executorMap": {
 		// https://nodejs.org/en/learn/typescript/run#registering-tsx-via-node
 		"typescript": "pnpm dotenvx run -- node --import=tsx $fullFileName"
-	}
-}
+	},
+	/** 
+		尝试让volar对md也提供基础的类型支持
+		https://github.com/vuejs/language-tools/tree/master/extensions/vscode#configs
+		https://vitepress.dev/guide/using-vue#vs-code-intellisense-support
+	*/
+	"vue.server.includeLanguages": [
+		"vue",
+		"markdown"
+	]
+}
diff --git a/vite-plugin-autogeneration-import-file/app/package.json b/vite-plugin-autogeneration-import-file/app/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@ruan-cat-test/vite-plugin-autogeneration-import-file-test-app-1",
+	"name": "@vite-plugin-autogeneration-import-file/app-1",
 	"private": true,
 	"version": "0.0.0",
 	"type": "module",
@@ -14,12 +14,13 @@
 		"clean": "rimraf dist .turbo"
 	},
 	"dependencies": {
+		"unplugin-vue-markdown": "^0.26.2",
 		"vue": "^3.5.12",
 		"vue-sonner": "^1.2.4",
 		"vue3-toastify": "^0.2.4"
 	},
 	"devDependencies": {
-		"@ruan-cat-test/vite-plugin-autogeneration-import-file": "workspace:^",
+		"@vite-plugin-autogeneration-import-file/code": "workspace:^",
 		"@vitejs/plugin-vue": "^5.1.4",
 		"typescript": "catalog:",
 		"unplugin-vue-components": "^0.27.4",

diff --git a/vite-plugin-autogeneration-import-file/app/src/App.vue b/vite-plugin-autogeneration-import-file/app/src/App.vue
@@ -2,6 +2,8 @@
 import { Toaster, toast } from "vue-sonner";
 
 import TestResolve from "./resovleComponents/resolve.vue";
+
+import indexMd from "./docs/index.md";
 </script>
 
 <template>
@@ -42,6 +44,8 @@ import TestResolve from "./resovleComponents/resolve.vue";
 			:gap="30"
 			:dir="'auto'"
 		></Toaster>
+
+		<indexMd></indexMd>
 	</section>
 </template>
 

diff --git a/vite-plugin-autogeneration-import-file/app/src/components/show-data.vue b/vite-plugin-autogeneration-import-file/app/src/components/show-data.vue
@@ -0,0 +1,5 @@
+<template>
+	<section>
+		<h3 style="background-color: aquamarine">show-data</h3>
+	</section>
+</template>
diff --git a/vite-plugin-autogeneration-import-file/app/src/docs/index.md b/vite-plugin-autogeneration-import-file/app/src/docs/index.md
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+
+// import ComponentHelloWorld from "@/components/HelloWorld.vue";
+import ShowData from "@/components/show-data.vue";
+
+</script>
+
+# 文档
+
+我希望在 md 文档内，使用 vue 组件。且实现语法高亮，自动提示，类型补全。
+
+## 目前的做法
+
+目前来说，还是比较有效的，勉强地实现组件导入。
+
+### tsconfig.json
+
+```json
+{
+	// https://vitepress.dev/guide/using-vue#vs-code-intellisense-support
+	"vueCompilerOptions": {
+		"vitePressExtensions": [".md"]
+	}
+}
+```
+
+### .vscode\settings.json
+
+```json
+{
+	/**
+		尝试让volar对md也提供基础的类型支持
+		https://github.com/vuejs/language-tools/tree/master/extensions/vscode#configs
+		https://vitepress.dev/guide/using-vue#vs-code-intellisense-support
+	*/
+	"vue.server.includeLanguages": ["vue", "markdown"]
+}
+```
+
+<!-- 这里勉强实现了组件导入并识别 -->
+
+<ShowData></ShowData>
+
+<!-- 这里的 template 无法实现识别 -->
+<!-- <template>
+	<ShowData></ShowData>
+</template> -->
diff --git a/vite-plugin-autogeneration-import-file/app/tsconfig.json b/vite-plugin-autogeneration-import-file/app/tsconfig.json
@@ -14,18 +14,58 @@
 			"ESNext",
 			"DOM"
 		],
-		"skipLibCheck": true
+		"skipLibCheck": true,
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"src/*"
+			],
+			"components/*": [
+				"src/components/*"
+			],
+			"types/*": [
+				"src/types/*"
+			],
+			"views/*": [
+				"src/views/*"
+			],
+			"api/*": [
+				"src/apis/*"
+			],
+			"stores/*": [
+				"src/stores/*"
+			],
+			"routers/*": [
+				"src/routers/*"
+			],
+			"utils/*": [
+				"src/utils/*"
+			],
+			"tools/*": [
+				"src/tools/*"
+			],
+			"models/*": [
+				"src/models/*"
+			],
+		},
 	},
 	"include": [
 		"src/**/*.ts",
 		"src/**/*.d.ts",
 		"src/**/*.tsx",
 		"src/**/*.vue",
+		"src/**/*.md",
 		"./types"
 	],
 	"references": [
 		{
 			"path": "./tsconfig.node.json"
 		}
-	]
+	],
+	// https://vitepress.dev/guide/using-vue#vs-code-intellisense-support
+	"vueCompilerOptions": {
+		"vitePressExtensions": [
+			".md"
+		],
+	},
 }
diff --git a/vite-plugin-autogeneration-import-file/app/turbo.json b/vite-plugin-autogeneration-import-file/app/turbo.json
@@ -6,7 +6,7 @@
 		"do-plugin-build": {
 			"cache": false,
 			"dependsOn": [
-				"@ruan-cat-test/vite-plugin-autogeneration-import-file#build"
+				"@vite-plugin-autogeneration-import-file/code#build"
 			]
 		},
 		"rm:types": {

diff --git a/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts b/vite-plugin-autogeneration-import-file/app/types/vite-env.d.ts
@@ -5,3 +5,12 @@ declare module "*.vue" {
 	const component: DefineComponent<{}, {}, any>;
 	export default component;
 }
+
+/**
+ * @see https://github.com/unplugin/unplugin-vue-markdown#typescript-shim
+ */
+declare module "*.md" {
+	import type { ComponentOptions } from "vue";
+	const Component: ComponentOptions;
+	export default Component;
+}
diff --git a/vite-plugin-autogeneration-import-file/app/vite.config.ts b/vite-plugin-autogeneration-import-file/app/vite.config.ts
@@ -6,7 +6,8 @@ import { upperFirst } from "lodash-es";
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import Components from "unplugin-vue-components/vite";
-import { getName, createPlugin } from "@ruan-cat-test/vite-plugin-autogeneration-import-file";
+import Markdown from "unplugin-vue-markdown/vite";
+import { getName, createPlugin } from "@vite-plugin-autogeneration-import-file/code";
 
 const { autoImport, resolver } = createPlugin();
 
@@ -61,7 +62,11 @@ export default defineConfig({
 	},
 
 	plugins: [
-		vue(),
+		vue({
+			include: [/\.vue$/, /\.md$/],
+		}),
+
+		Markdown({}),
 
 		autoImport([
 			// components
@@ -119,6 +124,25 @@ export default defineConfig({
 			dirs: [],
 			dts: false,
 			resolvers: [resolver([0, 2], [3])],
+
+			// https://github.com/unplugin/unplugin-vue-markdown#work-with-unplugin-vue-components
+			extensions: ["vue", "md"],
+			include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
 		}),
 	],
+
+	resolve: {
+		alias: {
+			"@": fileURLToPath(new URL("./src", import.meta.url)),
+			components: fileURLToPath(new URL("./src/components", import.meta.url)),
+			types: fileURLToPath(new URL("./src/types", import.meta.url)),
+			views: fileURLToPath(new URL("./src/views", import.meta.url)),
+			api: fileURLToPath(new URL("./src/apis", import.meta.url)),
+			stores: fileURLToPath(new URL("./src/stores", import.meta.url)),
+			router: fileURLToPath(new URL("./src/router", import.meta.url)),
+			utils: fileURLToPath(new URL("./src/utils", import.meta.url)),
+			tools: fileURLToPath(new URL("./src/tools", import.meta.url)),
+			models: fileURLToPath(new URL("./src/models", import.meta.url)),
+		},
+	},
 });
diff --git a/vite-plugin-autogeneration-import-file/core/package.json b/vite-plugin-autogeneration-import-file/core/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@ruan-cat-test/vite-plugin-autogeneration-import-file",
+	"name": "@vite-plugin-autogeneration-import-file/code",
 	"private": true,
 	"version": "0.0.0",
 	"license": "MIT",