api自动引入

原本 vue 的 api 需要自行 import。

import { computed, ref } from "vue";
const count = ref(0);
const doubled = computed(() => count.value * 2);

现在可以直接使用。

const count = ref(0);
const doubled = computed(() => count.value * 2);

而且上边的 api 是按需自动引入的。

目前模板支持自动引入 api 的库列表 👉

vue
vuex
pinia
vue-i18n
vue-router
@vueuse/core
@vueuse/head
@vueuse/math

只要确保已经安装依赖即可，具体可见 👉 vite-auto-import-resolvers，

当然还有项目中的自动引入，只需要满足以下规范即可。

src/composables 的导出将被按需自动引入。

例如有个 src/composables/foo.ts

// default 导出
export default 1000;

此时就不再需要 import了

html

<script setup lang="ts">
	console.log(foo) // 输出 1000
</script>

<template>
	<div @click="store.inc()">{{store.counter}}</div>
</template>

src/stores 的导出将被按需自动引入。

例如有个 src/stores/counterStore.ts

// default 导出
export default 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>

src/api 也是自动按需导入，与上述类似

具体可见 👉 unplugin-auto-import。

api自动引入 ​

api自动引入