Vue3 实战 - 配置 Element+

安装 Element+

pnpm install element-plus

按需加载 Element+ 组件

您需要使用额外的插件来导入要使用的组件。

自动导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm install -D unplugin-vue-components unplugin-auto-import

vite 配置

 ...
 plugins: [
      ...
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router'],
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage(带样式)
          ElementPlusResolver(),
        ],
        vueTemplate: true, // 是否在 vue 模板中自动导入
        dts: resolve(resolve(__dirname, 'src'), 'types', 'auto-imports.d.ts') // 指定自动导入函数TS类型声明文件路径
      }),
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
        ],
        dts: resolve(resolve(__dirname, 'src'), 'types', 'components.d.ts') // 指定自动导入组件TS类型声明文件路径
      }),
    ],
    ...

按需加载 Element+ 图标、iconify 图标

vue项目使用的图标一般有本地的png、svg图标，Element图标，还有就是通过自动导入使用三方库iconify的图标

安装 Element+ 图标

pnpm install @element-plus/icons-vue

安装自动导入 icon 插件

使用 unplugin-icons 和 unplugin-auto-import可以从 iconify 中自动导入图标

pnpm  i -D unplugin-icons

在vite.config.ts 配置自动导入，新建 /src/types目录用于存放自动导入函数auto-imports.d.ts和组件的TS类型声明文件components.d.ts

 ...
 plugins: [
      ...
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ['vue', 'vue-router', 'pinia'],
        eslintrc: {
          enabled: false, // 是否自动生成 eslint 规则，建议生成之后设置 false，手动维护
          filepath: './.eslintrc-auto-import.json', // 指定自动导入函数 eslint 规则的文件路径
          globalsPropValue: true
        },
        resolvers: [
          // 自动导入 Element Plus 相关函数，如：ElMessage(带样式)
          ElementPlusResolver(),
          IconsResolver({})
        ],
        vueTemplate: true, // 是否在 vue 模板中自动导入
        dts: resolve(resolve(__dirname, 'src'), 'types', 'auto-imports.d.ts') // 指定自动导入函数TS类型声明文件路径
      }),
      Components({
        resolvers: [
          // 自动导入 Element Plus 组件
          ElementPlusResolver(),
          // 自动导入图标组件
          IconsResolver({
            // @iconify-json/ep 是 Element Plus 的图标库
            enabledCollections: ['ep']
          })
        ],
        dts: resolve(resolve(__dirname, 'src'), 'types', 'components.d.ts') // 指定自动导入组件TS类型声明文件路径
      }),
      Icons({
        // 自动安装图标库
        autoInstall: true
      }),
    ],
    ...

在 .eslintrc.cjs 添加自动导入函数 eslint 规则

"extends": [
    "./.eslintrc-auto-import.json"
]

在tsconfig.json 添加自动导入TS类型声明文件

{
  "include": ["src/**/*.d.ts"]
}

svg 本地图标

通过 vite-plugin-svg-icons 插件使用 Iconfont 第三方图标库实现本地SVG图标展示 vite-plugin-svg-icons 官方文档

pnpm i -D vite-plugin-svg-icons

先指定一个存放svg的路径，如：src/assets/icons和src/assets/error，vite.config.ts 中配置插件

plugins: [
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [resolve(process.cwd(), 'src/assets/icons'), resolve(process.cwd(), 'src/assets/error')],
      // iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      // 指定symbolId格式
      symbolId: 'icon-[dir]-[name]'
    }),
]

在 src/main.ts 内引入注册脚本

import 'virtual:svg-icons-register'

封装一个SVG 组件以供项目使用，在src/components/创建SvgIcon文件夹，创建index.vue

<template>
  <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  iconClass: {
    type: String,
    required: false,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: '1em'
  }
})

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`)
</script>

<style scoped>
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em; /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
  outline: none;
  fill: currentcolor; /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
}
</style>

<template>
     <h1>img SVG本地图片:</h1>
    <svg-icon icon-class="homepage" />
    <svg-icon icon-class="user" color="red" />
</template>

<script setup lang="ts">
import SvgIcon from '@/components/SvgIcon/index.vue'
</script>

png 本地图标

vue3中使用本地PNG图标的方式（调试和线上图标都显示）

<template>
    <h1>img 本地PNG图片:</h1>
    <img src="../../../assets/images/static/icon.png" />
    <img :src="imgPath2" />
    <img :src="imgPath3" />
    <img :src="imgPath4" />
    <img :src="imgPath5" />

    <h2>img 本地图片动态导入:</h2>
    <img :src="getImgPath2('icon2.png')" />
    <img :src="getImgPath3('icon3.png')" />
</template>

<script setup lang="ts">
import imgPath2 from '@/assets/images/static/icon2.png'
const imgPath3 = getImgPath('icon3.png')
const imgPath4 = new URL(`../../../assets/images/static/icon4.png`, import.meta.url).href
const imgPath5 = new URL(`@/assets/images/static/icon5.png`, import.meta.url).href

const getImgPath2 = (name: string): any => {
  return new URL(`/src/assets/images/static/${name}`, import.meta.url).href
}

const getImgPath3 = (name: string): any => {
  return new URL(`../../../assets/images/static/${name}`, import.meta.url).href
}

</script>

Volar 支持

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}