vite+vue3+typesScript集成element-plus

---

前言

上一章我们学习了如何创建vite+vue3+typesScript项目，这一章我学习vite+vue3+typesScript集成element-plus。

---

一、集成element-plus，按需自动导入组件

1. 根据element-plus官方网站说明进行安装，我们选择使用pnpm进行初始化（在项目根目录下执行命令）。

pnpm install element-plus

2. 根据官方推荐，我们使用自动导入，首先我们需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件。

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

3. 在vite.config.ts进行配置element-plus

//导入这三个
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
//在plugins中添加
      AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
      Components({
      resolvers: [ElementPlusResolver()],
    })

（整体文件信息可参考上一章）

修改HelloWorld.vue

<template>
  <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>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>
</template>

重启pnpm run dev后，项目中会自动生成两个文件auto-imports.d.ts、components.d.ts


打开页面，我们看到已经集成成功。

“”

二、集成element-plus图标，按需自动导入组件

1. 根据element-plus官方网站，说明进行安装，我们选择使用pnpm进行初始化（在项目根目录下执行命令）。

pnpm install @element-plus/icons-vue

2. 根据官方推荐，我们使用自动导入，首先我们需要安装 unplugin-icons和 unplugin-auto-import这两款插件，我们已经安装了 unplugin-auto-import，所以只需要安装unplugin-icons即可。

pnpm i -D unplugin-icons

3. 编辑vite.config.ts

//我们导入包
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
······
//在plugins字段中添加对应插件
   plugins:[
      // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      vue(),
      // 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
      AutoImport({
      resolvers: [ElementPlusResolver(),
        // 自动导入图标组件
      IconsResolver()],
    }),
      Components({
      resolvers: [ElementPlusResolver(),
        // 自动注册图标组件,默认是开启所有的图标，图标集合在这个网站 https://iconify.design/icon-sets/.
      IconsResolver()],
    }),
    //自动安装图标
    Icons({
      autoInstall: true
    })]

4. 修改HelloWorld.vue，element-plus图标参考

<el-row>
    <p>
      图标演示
  </p>
    <el-icon :size="20">
      <i-mdi-account-box style="font-size: 2em; color: red"/>
  </el-icon>
  <el-icon :size="20">
    <i-ep-avatar style="font-size: 2em; color: red"/>
  </el-icon>
  avatar
  </el-row>

注： 使用组件解析程序时，必须遵循名称转换才能正确推断图标。
{prefix}-{collection}-{icon}
默认情况下，前缀设置为“i”，我们可以通过配置进行自定义，在 vite.config.ts中我们通过prefix可以进行自定义例如：
plugins:[ Components({
resolvers: [
IconsResolver({{prefix:“myIcons”}})],
})]。
代码：<i-mdi-account-box style="font-size: 2em; color: red"/>就得写成这样<myIcons-mdi-account-box style="font-size: 2em; color: red"/>
collection集合我们可以访问https://iconify.design/icon-sets查看
如我们代码中<i-mdi-account-box style="font-size: 2em; color: red"/>中的mdi,


<i-ep-avatar style="font-size: 2em; color: red"/>中的ep,ep就是element-plus的图标。

三、使用unplugin-icons，添加自定义图标

参考官方文档进行自定义图标

1. 编辑vite.config.ts

...
plugins：[...
     Components({
      resolvers: [...
        // 自动注册图标组件,默认是开启所有的图标，图标集合在这个网站 https://iconify.design/icon-sets/.
        //添加自定义图标collectionid,我们命名为my-incns，添加customCollections参数，将我们自定义集合放进去
      IconsResolver({customCollections:["my-incns"]})],
    }),
    //自动安装图标
    Icons({
     ...
     //添加自定义集合，"my-incns"是collection集合id，star是图片名称，star的值为svg代码
      customCollections:{
        "my-incns":{
        star:'<svg  width="24" height="24" viewBox="0 0 1024 1024" >'+
        '<path fill="currentColor" d="M628.736 528.896A416 416 0 0 1 928 928H96a415.872 415.872 0 0 1 299.264-399.104L512 704l116.736-175.104zM720 304a208 208 0 1 1-416 0a208 208 0 0 1 416 0z"/></svg>'
      }}
    })],
   ...

2. 编辑HelloWorld.vue，添加代码

   自定义图标：前缀：i,collection集合id:my-incns 图标名称：star
    <el-icon :size="20">
    <i-my-incns-star style="font-size: 2em; color: red"/>
    </el-icon>

总结

以上就是今天要讲的内容，本文仅是简单的讲了vite+vue3+typesScript集成element-plus，对于后续的element-plus使用不再进行描述。