vue3+vite按需导入API、组件

本文主要是介绍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/componentsextensions: ['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?: stringname: string}>(),{prefix: "icon",name: "",}
)
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
</script>

这篇关于vue3+vite按需导入API、组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---