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>