17 【vue3自动导入配置】

17 【Vue3自动导入配置】

1.自动导入组件库组件

unplugin-vue-components

image-20220924104148732

安装

1
pnpm install unplugin-vue-components -D

然后将下面的代码添加到 Vite 的配置文件。

Vite配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import {
  ElementPlusResolver,
  AntDesignVueResolver,
  VantResolver,
  HeadlessUiResolver,
  ElementUiResolver
} from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    Components({
      // ui库解析器，也可以自定义
      resolvers: [
        ElementPlusResolver(),
        AntDesignVueResolver(),
        VantResolver(),
        HeadlessUiResolver(),
        ElementUiResolver()
      ]
    })
  ]
})

插件会生成一个ui库组件以及指令路径components.d.ts文件，详情看这个vue3的issue types(defineComponent): support for expose component types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// components.d.ts

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399

declare module 'vue' {
  export interface GlobalComponents {
    ElAside: typeof import('element-plus/es')['ElAside']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElContainer: typeof import('element-plus/es')['ElContainer']
    ElDropdown: typeof import('element-plus/es')['ElDropdown']
    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
    ElHeader: typeof import('element-plus/es')['ElHeader']
    ElIcon: typeof import('element-plus/es')['ElIcon']
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
    ElResult: typeof import('element-plus/es')['ElResult']
  }
}

export { }

想了解其他的打包工具(Rollup, Vue CLI)，请参考 unplugin-vue-components。

自动导入自己的组件

直接写组件名即可，插件会帮你引入进来 注意别重名

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// vite.config.js
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      // 指定组件位置，默认是src/components
      dirs: ['src/components', 'src/views'],
      // ui库解析器
      // resolvers: [ElementPlusResolver()],
      extensions: ['vue'],
      // 配置文件生成位置
      dts: 'src/components.d.ts'
    })
  ]
})

插件会生成一个自己组件路径的components.d.ts文件，详情看这个vue3的issue types(defineComponent): support for expose component types

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// components.d.ts

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399

declare module 'vue' {
  export interface GlobalComponents {
    BaseFilter: typeof import('./components/Common/BaseFilter.vue')['default']
    BaseHeader: typeof import('./components/Common/BaseHeader.vue')['default']
    BasePagination: typeof import('./components/Common/BasePagination.vue')['default']
    BaseSidebar: typeof import('./components/Common/BaseSidebar.vue')['default']
    BaseTags: typeof import('./components/Common/BaseTags.vue')['default']
    BaseTitle: typeof import('./components/Common/BaseTitle.vue')['default']
  }
}

export { }

2.自动导入Vue 函数和自己的公用函数

2.1 自动导入Vue 函数

unplugin-auto-import/vite

自动导入vue3的hooks，借助unplugin-auto-import/vite这个插件

支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入

安装

1
pnpm i -D unplugin-auto-import

Vite配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: ['vue', 'vue-router', ,'vue-i18n', '@vueuse/head', '@vueuse/core',],
      // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
       dts: 'src/auto-import.d.ts'
        
    })
  ]
})

原理: 安装的时候会自动生成auto-imports.d文件(默认是在根目录)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source control
declare global {
  const ref: typeof import('vue')['ref']
  const reactive: typeof import('vue')['reactive']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const watch: typeof import('vue')['watch']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  .
  .
  .
}
export {}

可以选择auto-import.d.ts生成的位置，使用ts建议设置为src/auto-import.d.ts

其他插件 vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入的自动引入请查看文档

2.2 自动导入自己的公用函数

默人导入axios，分别导入pinia的storeToRefs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
AutoImport({
      // Auto import functions from Vue, e.g. ref, reactive, toRef...
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      imports: [
        'vue',
        'vue-router',
        {
          axios: [
            // default imports
            ['default', 'axios'], // import { default as axios } from 'axios',
          ],
           pinia: ['storeToRefs'],
            // import { storeToRefs } from 'pinia'
        },
        '@vueuse/core',
      ],
    }),

自动导入自己定义的函数

1
2
3
4
5
6
7
8
9
AutoImport({
  // Auto import for module exports under directories
  // by default it only scan one level of modules under the directory
  dirs: ['./src/utils'],
  // 可以选择auto-import.d.ts生成的位置，使用ts建议设置为'src/auto-import.d.ts'
  dts: 'src/auto-import.d.ts',
  // 在vue模板中使用
  vueTemplate: true,
}),

观察auto-import.d.ts文件

1
2
3
4
5
6
7
8
9
export {}
declare global {
  const axios: typeof import('axios')['default']
  const bus: typeof import('./utils/bus')['bus']
  const diffDays: typeof import('./utils/date')['diffDays']
  const formatDate: typeof import('./utils/date')['formatDate']
  const http: typeof import('./utils/service')['http']
  const isDark: typeof import('./utils/dark')['isDark']
}

3.自动导入组件库样式

1
2
3
4
5
6
7
8
import { createStyleImportPlugin, ElementPlusResolve  } from 'vite-plugin-style-import';

plugins: [vue(),
 //按需导入element-plus的css样式
     createStyleImportPlugin({
      resolves: [ElementPlusResolve()],
    }),
], //查看 插件 API 获取 Vite 插件的更多细节 https://www.vitejs.net/guide/api-plugin.html

4.自动导入icon

UnoCSS 是 antfu 开发的一个原子化 CSS 引擎，这里就不详细说了，大家感兴趣可以去读一下他的文章【**重新构想原子化 CSS**】。

安装依赖

1
2
# @iconify-json/ep 是 Element Plus 的图标库
pnpm i -D unocss @iconify-json/ant-design

修改 vite.config.ts 配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Unocss from 'unocss/vite'
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss';

export default defineConfig({
  plugins: [
    vue(),

    // 添加以下配置
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
      transformers: [transformerDirectives(), transformerVariantGroup()],
    })
  ]
})

修改 main.ts

1
2
// 在 main.ts 里添加以下代码
import 'uno.css'

使用

1
2
3
4
5
6
7
8
// svg图片
<i
    class="i-ant-design-picture-filled w-330px h-240px"
/>
// 图标字体
<i
    i="ant-design-picture-filled"
/>
Vue
#Vue
17 【vue3自动导入配置】
https://flepeng.github.io/021-frontend-04-Vue-01-course-vue3-17-【vue3自动导入配置】/
作者
Lepeng
发布于
2023年8月1日
许可协议