Skip to content

Vue3 实战 - 配置 Element+

安装 Element+

bash
pnpm install element-plus

按需加载 Element+ 组件

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

自动导入

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

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

vite 配置

ts
 ...
 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项目使用的图标一般有本地pngsvg图标,Element图标,还有就是通过自动导入使用三方库iconify的图标

安装 Element+ 图标

bash
pnpm install @element-plus/icons-vue

安装自动导入 icon 插件

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

bash
pnpm  i -D unplugin-icons

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

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 规则

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

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

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

svg 本地图标

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

bash
pnpm i -D vite-plugin-svg-icons

先指定一个存放svg的路径,如:src/assets/iconssrc/assets/errorvite.config.ts 中配置插件

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 内引入注册脚本

ts
import 'virtual:svg-icons-register'

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

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>
vue
<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图标的方式(调试和线上图标都显示)

vue
<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"]
  }
}