Vue 组件库中的（自动，手动）按需导入
按需导入介绍
为什么要按需导入，默认全局导入会把所有的组件全部都打包一遍，而按需导入只会把我们需要使用的组件进行打包，极大的减少程序的体积，加快程序的加载速度。
自动按需导入（推荐）
无需每次都进行import通过插件自动按需导入所需要组件
首先用到的插件就是unplugin-vue-components
Vue的按需组件自动导入，是由 Vue官方人员开发的一款自动引入插件，可以省去比如 UI 库的大量 import 语句。
自动按需导入插件安装
npm install unplugin-vue-components -D手动按需导入
每次都进行import导入需要用到的组件
各种组件库的使用方法
Element Plus
Vite - 自动按需导入
配置Vite
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'Components({
resolvers: [ElementPlusResolver()],
}),整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
示例Vue代码
<template>
<el-button>I am ElButton</el-button>
</template>Vite - 自动按需导入 - 组件 API
配置Vite
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'AutoImport({
resolvers: [ElementPlusResolver()],
}),整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
],
})
示例Vue
<script setup>
ElMessageBox.alert('This is a message');
</script>Vite - 自动按需导入 - 组件库样式
Element Plus在使用Vite - 自动按需导入 - 组件 API的时候会自动加载样式，如果我们没有使用的时候，手动导入组件API则还需要每次都引入css样式，使用此插件即可自动按需引入
配置vite
import styleImport from 'vite-plugin-style-import';styleImport({
libs: [
{
libraryName: 'element-plus',
resolveStyle: (name) => {
// 删除前面el-
const replace = name.slice(3);
return `element-plus/es/components/${replace}/style/css`;
},
},
],
}),整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import styleImport from 'vite-plugin-style-import';
export default defineConfig({
// ...
plugins: [
// ...
styleImport({
libs: [
{
libraryName: 'element-plus',
resolveStyle: (name) => {
// 删除前面el-
const replace = name.slice(3);
return `element-plus/es/components/${replace}/style/css`;
},
},
],
}),
],
})
示例Vue
<script setup>
import { ElMessageBox } from 'element-plus';
ElMessageBox.alert('This is a message');
</script>手动按需导入
示例Vue代码
// App.vue
<template>
<el-button>I am ElButton</el-button>
</template>
<script setup>
import 'element-plus/es/components/button/style/css';
import { ElButton } from 'element-plus'
</script>手动按需导入（Vite - 自动导入css样式文件）【不建议使用】
使用Element Puls官网提供的插件，只需要导入组件即可，会自动导入css样式文件
npm install unplugin-element-plus -D配置vite
import ElementPlus from 'unplugin-element-plus/vite'ElementPlus()整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [ElementPlus()],
})
示例Vue代码
// App.vue
<template>
<el-button>I am ElButton</el-button>
</template>
<script setup>
import { ElButton } from 'element-plus'
</script>Arco Design
Vite - 自动按需导入
配置Vite
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';Components({
resolvers: [
ArcoResolver({
resolveIcons: true// 图标 Icon
})
]
})整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite';
import { ArcoResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
Components({
resolvers: [
ArcoResolver({
resolveIcons: true// 图标 Icon
})
]
})
]
});
示例Vue代码
<template>
<a-button>I am AButton</a-button>
</template>Vite - 自动按需导入 - 组件 API
配置Vite
import AutoImport from 'unplugin-auto-import/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers';AutoImport({
resolvers: [ArcoResolver()],
}),整体文件预览
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ArcoResolver()],
}),
],
})
示例Vue
<script setup>
Message.info('This is an info message!')
</script>
版权声明：
作者：Teroun
链接：https://blog.bingxs.com/vuezjkzdzdsdaxdr.html
文章版权归作者所有，未经允许请勿转载。
THE END
