feat: 项目级自动引入

README.md

@@ -29,10 +29,10 @@
 20. 支持 Markdown 渲染
 21. 路径别名 `~` 支持
 22. 命令行自动创建与删除
-23. `i18n` 国际化支持
-24. 漂亮的 `404页` 支持
-25. `tsx` 支持
-26. `gzip` 资源压缩支持
+23. i18n 国际化支持
+24. 漂亮的 404页 支持
+25. tsx 支持
+26. gzip 资源压缩支持
 
 <br />
 <br />
@@ -327,7 +327,61 @@ const doubled = computed(() => count.value * 2)
 1. vue
 2. pinia
 3. vueuse
-4. vue-router
+4. vue-i18n
+5. vue-router
+
+当然还有项目中的自动引入，只需要满足以下规范即可。
+
+1. `src/composables` 下凡是 `use` 开头的模块，同时里边有与模块相同的命名导出，该导出就可以按需自动引入。
+
+例如有个 `src/composables/useFoo.ts`
+
+```ts
+// src/composables/useFoo.ts
+
+// 与模块相同命名的导出
+export const useFoo = () => 100
+```
+
+此时就不再需要 `import`了
+
+```html
+<script setup lang="ts">
+    const foo = useFoo()
+    console.log(foo) // 将输出 100
+</script>
+```
+
+2. `src/stores` 下凡是 `Store` 结尾的模块，同时里边有与模块相同的命名导出，该导出就可以按需自动引入。
+
+例如有个 `src/stores/counterStore.ts`
+
+```ts
+// 与模块相同命名的导出
+export const counterStore = defineStore('counter', {
+    state() {
+        return {
+            counter: 1
+        }
+    },
+    actions: {
+        inc() {
+            this.counter++
+        }
+    }
+})
+```
+此时就不再需要 `import`了
+
+```html
+<script setup lang="ts">
+    const store = counterStore()
+</script>
+
+<template>
+    <div @click="store.inc()">{{store.counter}}</div>
+</template>
+```
 
 <br />
 
@@ -500,21 +554,27 @@ pnpm run analysis:build
 
 `src/composables` 目录用来存储 `composition-api` 模块。
 
-该目录下预设了`dark` 模块，该模块导出 `isDark` 和 `toggleDark` 用来显示和切换暗黑模式。
+该目录下预设了`useDarks` 模块，该模块导出 `isDark` 和 `toggleDark` 用来显示和切换暗黑模式。
 
 ```ts
-// src/composables/dark.ts
+// src/composables/useDarks.ts
 
-// vueuse的api会自动按需引入，无需import
+// vueuse的 api 会自动按需引入，无需import
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
+
+// 符合自动引入标准
+export const useDarks = () => ({ isDark, toggleDark })
 ```
 
 模板中即可直接用
 
 ```html
 <script setup lang="ts">
-import { isDark, toggleDark } from "../composables/dark";
+import { isDark, toggleDark } from "../composables/useDarks";
+
+// 或者使用自动按需引入
+// const { isDark, toggleDark } = useDarks()
 </script>
 
 <template>

presets/shared/resolvers.ts

@@ -0,0 +1,26 @@
+import { Resolver } from 'unplugin-auto-import/dist/types'
+
+/**
+ * 组合式 api 自动引入解析器
+ */
+export const ComposablesResolver: Resolver = name => {
+	const inComposables =
+		name.startsWith('use') && !name.endsWith('Store')
+	if (inComposables) {
+		return {
+			path: `~/composables/${name}`
+		}
+	}
+}
+
+/**
+ * store 自动引入解析器
+ */
+export const StoresResolver: Resolver = name => {
+	const inStores = name.endsWith('Store')
+	if (inStores) {
+		return {
+			path: `~/stores/${name}`
+		}
+	}
+}

presets/tov.ts

@@ -20,6 +20,10 @@ import I18n from '@intlify/vite-plugin-vue-i18n'
 import ViteRestart from 'vite-plugin-restart'
 import vueJsx from '@vitejs/plugin-vue-jsx'
 import viteCompression from 'vite-plugin-compression'
+import {
+	StoresResolver,
+	ComposablesResolver
+} from './shared/resolvers'
 
 const markdownWrapperClasses =
 	'prose md:prose-lg lg:prose-lg dark:prose-invert text-left p-10 prose-slate prose-img:rounded-xl prose-headings:underline prose-a:text-blue-600'
@@ -70,15 +74,19 @@ export default () => {
 				'vue-router',
 				'@vueuse/core'
 			],
-			resolvers: [ElementPlusResolver()]
+			resolvers: [
+				StoresResolver,
+				ComposablesResolver,
+				ElementPlusResolver()
+			]
 		}),
 		I18n({
 			runtimeOnly: true,
 			compositionOnly: true,
 			include: [resolve(__dirname, '../locales/**')]
 		}),
 		ViteRestart({
-			restart: ['presets/tov.[jt]s']
+			restart: ['presets/tov.[jt]s', 'presets/shared/**/*']
 		}),
 		vueJsx(),
 		viteCompression()

presets/types/auto-imports.d.ts

@@ -110,6 +110,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useCycleList: typeof import('@vueuse/core')['useCycleList']
   const useDark: typeof import('@vueuse/core')['useDark']
+  const useDarks: typeof import('~/composables/useDarks')['useDarks']
   const useDebounce: typeof import('@vueuse/core')['useDebounce']
   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']

src/composables/useDarks.ts

@@ -0,0 +1,4 @@
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+export const useDarks = () => ({ isDark, toggleDark })

src/pages/Index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { isDark, toggleDark } from "~/composables/dark";
-
 const { t, locale } = useI18n()
 
+const { isDark, toggleDark } = useDarks()
+
+
 const toggleLocale = () => {
     locale.value = locale.value === 'zh-CN' ? 'en' : 'zh-CN'
 }