diff --git a/README.md b/README.md
index b117ecb..577d800 100644
--- a/README.md
+++ b/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 资源压缩支持
@@ -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
+
+```
+
+2. `src/stores` 下凡是 `Store` 结尾的模块,同时里边有与模块相同的命名导出,该导出就可以按需自动引入。
+
+例如有个 `src/stores/counterStore.ts`
+
+```ts
+// 与模块相同命名的导出
+export const counterStore = defineStore('counter', {
+ state() {
+ return {
+ counter: 1
+ }
+ },
+ actions: {
+ inc() {
+ this.counter++
+ }
+ }
+})
+```
+此时就不再需要 `import`了
+
+```html
+
+
+
+ {{store.counter}}
+
+```
@@ -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
diff --git a/presets/shared/resolvers.ts b/presets/shared/resolvers.ts
new file mode 100644
index 0000000..e91cca3
--- /dev/null
+++ b/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}`
+ }
+ }
+}
diff --git a/presets/tov.ts b/presets/tov.ts
index aa2f94c..109b657 100644
--- a/presets/tov.ts
+++ b/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,7 +74,11 @@ export default () => {
'vue-router',
'@vueuse/core'
],
- resolvers: [ElementPlusResolver()]
+ resolvers: [
+ StoresResolver,
+ ComposablesResolver,
+ ElementPlusResolver()
+ ]
}),
I18n({
runtimeOnly: true,
@@ -78,7 +86,7 @@ export default () => {
include: [resolve(__dirname, '../locales/**')]
}),
ViteRestart({
- restart: ['presets/tov.[jt]s']
+ restart: ['presets/tov.[jt]s', 'presets/shared/**/*']
}),
vueJsx(),
viteCompression()
diff --git a/presets/types/auto-imports.d.ts b/presets/types/auto-imports.d.ts
index 1f6072d..4125cb0 100644
--- a/presets/types/auto-imports.d.ts
+++ b/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']
diff --git a/src/composables/dark.ts b/src/composables/dark.ts
deleted file mode 100644
index a2a21dd..0000000
--- a/src/composables/dark.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const isDark = useDark()
-export const toggleDark = useToggle(isDark)
diff --git a/src/composables/useDarks.ts b/src/composables/useDarks.ts
new file mode 100644
index 0000000..1f9980e
--- /dev/null
+++ b/src/composables/useDarks.ts
@@ -0,0 +1,4 @@
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+export const useDarks = () => ({ isDark, toggleDark })
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 688500b..32a9032 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,8 +1,9 @@