17 【vue3自动导入配置】
# 17 【Vue3自动导入配置】
# 1.自动导入组件库组件
unplugin-vue-components (opens new window)
安装
pnpm install unplugin-vue-components -D
1
然后将下面的代码添加到 Vite 的配置文件。
Vite配置
// 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()
]
})
]
})
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
插件会生成一个ui库组件以及指令路径components.d.ts文件，详情看这个vue3的issue types(defineComponent): support for expose component types (opens new window)
// 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 { }
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
想了解其他的打包工具(Rollup (opens new window), Vue CLI (opens new window))，请参考 unplugin-vue-components (opens new window)。
自动导入自己的组件
直接写组件名即可，插件会帮你引入进来 注意别重名
// 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'
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
插件会生成一个自己组件路径的components.d.ts文件，详情看这个vue3的issue types(defineComponent): support for expose component types (opens new window)
// 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 { }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2.自动导入Vue 函数和自己的公用函数
# 2.1 自动导入Vue 函数
unplugin-auto-import/vite (opens new window)
自动导入vue3的hooks，借助unplugin-auto-import/vite (opens new window)这个插件
支持vue, vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入
安装
pnpm i -D unplugin-auto-import
1
Vite配置
// 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'
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
原理: 安装的时候会自动生成auto-imports.d文件(默认是在根目录)
// 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 {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
可以选择auto-import.d.ts生成的位置，使用ts建议设置为src/auto-import.d.ts
其他插件 vue-router, vue-i18n, @vueuse/head, @vueuse/core等自动引入的自动引入请查看文档
# 2.2 自动导入自己的公用函数
默人导入axios，分别导入pinia的storeToRefs
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
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
自动导入自己定义的函数
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,
}),
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
观察auto-import.d.ts文件
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']
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3.自动导入组件库样式
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
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 4.自动导入icon
UnoCSS (opens new window) 是 antfu 开发的一个原子化 CSS 引擎，这里就不详细说了，大家感兴趣可以去读一下他的文章【重新构想原子化 CSS (opens new window)】。
安装依赖
# @iconify-json/ep 是 Element Plus 的图标库
pnpm i -D unocss @iconify-json/ant-design
1
2
2
修改 vite.config.ts 配置
// 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()],
})
]
})
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
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
修改 main.ts
// 在 main.ts 里添加以下代码
import 'uno.css'
1
2
2
使用
// svg图片
<i
class="i-ant-design-picture-filled w-330px h-240px"
/>
// 图标字体
<i
i="ant-design-picture-filled"
/>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
上次更新: 2024-09-30 01:09:25