vue3.0 + vite + ts 完成自动导入 vue API 和 自动导入组件及 element loading 指令无法正常使用解决方法_components.d

1. 插件(两个组件, 都是 antfu( vite 核心团队成员 ) 写的)
   npm i unplugin-auto-import unplugin-vue-components -D
2. 使用, 下面是最简单的使用方法
   vue component 文档
   auto-import

文档很简单, 还需自行探索, 大佬一贯思想, 他很懒, 不想写文档, 看源码就够了

下面的是 vue vue-router elementui 组件库的自动导入。也有其他的选项可以自行探索。

// https://vitejs.dev/config/
import AutoImport from 'unplugin-auto-import/vite'
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', 'vue-router'],
    }),
    Components({
      resolvers: [ElementPlusResolver({ ssr: false, directives: false })],
      dirs: ['src/layout/components', 'src/components'],
      dts: true,
    }),
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 执行命令
   npm run dev, 执行完成之后, 会生成两个文件 auto-imports.d, components.d

在这解释一下, auto-imports.d 其实本质就是利用全局 declare 来将 vue 的 api 声明为全局的变量, 下面是代码

components.d 其实本质就是利用 GlobalComponents, 来将组件注册到全局组件里面, 这样就可以自动推断组件类型了;volar 插件就利用了这个 API , 便于插件推导组件类型的, naive ui框架 就是使用的这个api，如果感性去可以去代码库看一下 地址

不过编译过程肯定有复杂的处理, 还没仔细研究

4. 引入生成的 .d.ts 文件, 在这里你要引入生成的类型文件, 如果不太熟悉 ts , 先去看下 tsconfig 相关字段

 "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts",
    "components.d.ts"
  ],
1
2
3
4
5
6
7
8

5. 效果展示(不需要导入, 也不会提示错误)

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

6. 在框架层次使用(完美解决 按需引入麻烦的, 下面是 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库的解析工具, 里面的选项有是否使用自动导入样式 如果需要通过 var 变量改变主题 需要注意一下
    })
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

v-loading 等指令无法正常使用

关于 element 组件自动导入存在 loading 指令无法正常使用的问题, 需要在 mian.ts 文件里面自行导入
issue

解决方案

创建文件 element-plus-directive.ts, 这个文件就是导入你需要的指令和样式, 然后注册到全局组件

import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/loading/style/css'
import 'element-plus/es/components/message-box/style/css'
import type { App } from '@vue/runtime-core'
/**
 * 按需导入 Element Plus 组件
 * Vite 插件 https://github.com/antfu/unplugin-vue-components
 * @param app {App}
 */
export default function styleImport(app: App<any>) {
  const components = [ElLoading, ElMessage, ElMessageBox]
  components.forEach((v) => {
    app.use(v)
  })
  // 将message组件挂载到 window 对象
  self.$message = ElMessage
  self.$messageBox = ElMessageBox
  return app
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在 main 中引入

const app = createApp(App)
elemetPlusDirectives(app).mount('#app')
1
2

参考文档