vue3 + vite + element-plus按需自动引入搭建项目(三)
使用element-plus的图标的时候，需要安装资源；
安装element-plus的图片库：
//在当前项目文件夹下
npm install @element-plus/icons-vue安装element-plus图片库自动导入的两款插件unplugin-icons 和 unplugin-auto-import：
//在当前项目文件夹下
npm install -D unplugin-icons unplugin-auto-import在项目里的vite.config.ts配置文件配置这两款插件：
配置前：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
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(),
AutoImport({
resolvers: [
// 自动导入element-plus组件
ElementPlusResolver(),
],
}),
Components({
resolvers: [
// 自动导入element-plus组件
ElementPlusResolver(),
],
}),]
})配置后：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//引入插件
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),
AutoImport({
resolvers: [
// 自动导入element-plus组件
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'Icon',
}),
],
}),
Components({
resolvers: [
// 自动导入element-plus组件
ElementPlusResolver(),
// 自动注册图标组件
IconsResolver({
enabledCollections: ['ep'],
}),
],
}),
// 自动导入图标组件
Icons({
autoInstall: true,
}),]
})
打开element-plus组件使用说明页面面：
复制选中的代码，粘贴到自己项目中的App.vue文件里面；
复制前：
<script setup>
</script>
<template>
<div>
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<!-- 使用路由的方式加载 -->
<router-view />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
复制后：
<script setup>
</script>
<template>
<div>
<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<Edit />
<el-row class="mb-4">
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
</el-row>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div>
<!-- 使用路由的方式加载 -->
<router-view />
</template>
<style scoped>
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
改造完之后，运行项目：
npm run dev界面怎么没有图标呢？不会出错了吧！！！
出现这种情况是因为，按需自动引入的写法要和其它引入方式有区别；要在图标的标签前面添加IEp前缀，项目中的代码做如下修改：
<el-icon :size="size" :color="color">
<IEpEdit />
</el-icon>
<!-- 或者独立使用它，不从父级获取属性 -->
<IEpEdit />再次运行项目：
界面上已经可以看到图标了，大功告成！！！