vue3+vite按需导入API、组件

Vue API自动导入

1.我们在每个.vue文件中使用vue3的ref、reactive等API都需要导入一次：

import {ref, reactive} from "vue";
const str= ref("");

2.使用unplugin-auto-import插件自动导入

2.1安装unplugin-auto-import

npm i -D unplugin-auto-import

2.2 vite.config.ts配置

import { defineConfig } from "vite"
import path from "path"
import vue from "@vitejs/plugin-vue"
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite"
import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
    base: "./",
    plugins: [
        vue(),
        VueI18nPlugin({ runtimeOnly: false }),
        AutoImport({
            imports: [
                {
                    "vue-i18n": ["useI18n"]
                },
                "vue",
                "vue/macros",
                "@vueuse/core"，
                "vue-router",
            ],
            vueTemplate: true,
            dts: path.resolve("types", "auto-imports.d.ts") // 指定自动导入函数TS类型声明文件路径
        }),
    ],
})

重新启动项目：npm run dev，会在根目录/types/目录下生成一个auto-imports.d.ts文件。

• "vue-i18n": ["useI18n"]: 不需要通过import { useI18n } from "vue-i18n"导入UserI18n方法；
• "vue": 把import { onMounted, reactive } from "vue"等vue中的API自动导入
• "vue/macros"： 导入vue语法糖的，比如：const str = ref(""), 需要通过str.value访问到str的值，而const str = $ref("")，可直接通过str访问到str的值。
• "@vueuse/core": 暂时不知道作用，欢迎补充。
• "vue-router": 导入useRoute、useRouter等APi。

2.3 打包时可能会用到vue-tsc对typescript进行类型检查，这时控制台可能会报错：
Cannot find name 'ref'.

tsconfig.js:

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.node.json:

{
  "extends": "@tsconfig/node18/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "moduleResolution": "node",
    "composite": true,
    "module": "ESNext",
    "types": ["node"]
  }
}

解决方法：在从tsconfig.app.json中include加入auto-import.ts, 这里使用匹配的方式——"./types/*.ts"

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "./types/*.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "moduleResolution": "node",
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3.配置通用组件自动导入

npm install  -D unplugin-vue-components

3.1 vite.config.ts配置

import { defineConfig } from "vite"
import path from "path"
import Components from 'unplugin-vue-components/vite'
export default defineConfig({
    base: "./",
    plugins: [
        Components({
            dirs: ['src/public'], // 指定组件位置,默认指定文件夹是src/components
            extensions: ['vue'], // 组件的有效文件扩展名
            deep: true, // 搜索子目录
            dts: path.resolve("types", "components.d.ts") // 指定自动导入函数TS类型声明文件路径
        }),
    ],
})

如果src/public目录下有一个SvgIcon.vue组件，后面在任何.vue文件中使用SvgIcon,都不需要通过import SvgIcon from "@/public/SvgIcon.vue"导入。

附上npm地址：https://www.npmjs.com/package/@dafenqi/unplugin-vue-components

4.自动注册自定义icon组件

npm install  -D vite-plugin-svg-icons

vite.config.ts配置：

import { createSvgIconsPlugin } from "vite-plugin-svg-icons"
import path from "path"
export default defineConfig({
    base: "./",
    plugins: [
        createSvgIconsPlugin({
            iconDirs: [path.resolve(__dirname, "src/assets/svg")], // 指定存放 SVG 图标的目录
            symbolId: "icon-[name]", // 设置生成的 Vue 组件的 ID 格式
            inject: "body-first",
            customDomId: "__svg__icons__dom__"
        }),
    ],
})

在 Vue 组件中使用 SVG 图标：

<template>
    <svg aria-hidden="true">
        <use :xlink:href="symbolId" />
    </svg>
</template>
<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        prefix?: string
        name: string
    }>(),
    {
        prefix: "icon",
        name: "",
    }
)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>