- 插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的)
npm i unplugin-auto-import unplugin-vue-components -D
- 使用, 下面是最简单的使用方法
vue component 文档
auto-import
文档很简单, 还需自行探索, 大佬一贯思想, 他很懒, 不想写文档, 看源码就够了
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS(),
AutoImport({
imports: ['vue']
}),
Components({
/* options */
})
]
})
- 执行命令
npm run dev
, 执行完成之后, 会生成两个文件auto-imports.d, components.d
在这解释一下,
auto-imports.d
其实本质就是利用全局declare
来将 vue 的 api 声明为全局的变量, 下面是代码
components.d
其实本质就是利用GlobalComponents
, 来将组件注册到全局组件里面, 这样就可以自动推断组件类型了;volar 插件就利用了这个API
, 便于插件推导组件类型的,naive
ui框架 就是使用的这个api,如果感性去可以去代码库看一下 地址
不过编译过程肯定有复杂的处理, 还没仔细研究
- 引入生成的 .d.ts 文件, 在这里你要引入生成的类型文件, 如果不太熟悉 ts , 先去看下 tsconfig 相关字段
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"auto-imports.d.ts",
"components.d.ts"
],
- 效果展示(不需要导入, 也不会提示错误)
<script setup lang="ts">
onMounted(() => {})
</script>
<template>
<HelloWorld msg="dsfsfsd" />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 在框架层次使用(完美解决 按需引入麻烦的, 下面是 element, 如果需要 antdesign, vant 自行去文档查看)
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS(),
AutoImport({
imports: ['vue']
}),
Components({
resolvers: [ElementPlusResolver()] // 这里就是相关ui库的解析工具
})
]
})