vue3+TS 项目引入element plus 组件库，图标库 使用

 element Plus 组件库 ：Button 按钮 | Element Plus (gitee.io)

 具体详细可以见官方文档：快速开始 | Element Plus (gitee.io)

下面是我实操

目录

一.element-plus 安装

1.安装依赖

2.引入

2.1.完整引入，

2.2.按需引入-自动导入，

 2.3.按需引入-手动导入，

二.element-plus 图标库 安装

1.下载安装依赖

2.注册所有图标

---

一.element-plus 安装

1.安装依赖

npm install element-plus --save

2.引入

2.1.完整引入，

此时可以直接去页面使用,推荐使用很方便，但是打包后的文件大小不友好

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

使用时直接在页面

<template>
  <el-button type="primary">Primary</el-button>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

 

2.2.按需引入-自动导入，

使用时可以直接粘贴组件库代码

安装依赖

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

修改vite.config.ts文件内容，修改后如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

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: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
  resolve: {
    extensions: ['.vue', '.ts'],
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
})

使用时直接在页面

<template>
  <el-button type="primary">Primary</el-button>
</template>

<script setup lang="ts">

</script>

<style scoped></style>

 2.3.按需引入-手动导入，

使用时需要在当前页面引入，(不推荐，很麻烦)

首先安装依赖

npm i unplugin-element-plus -D

然后修改vite.config.ts文件内容，如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

// 以下为按需导入，自动引入手动导入element plus
// import AutoImport from 'unplugin-auto-import/vite'
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

//手动导入element plus 时
import ElementPlus from 'unplugin-element-plus/vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    //手动导入element plus 时
    ElementPlus({}),

    // 以下为按需导入，自动引入手动导入element plus
    // AutoImport({
    //   resolvers: [ElementPlusResolver()],
    // }),
    // Components({
    //   resolvers: [ElementPlusResolver()],
    // }),
  ],
  resolve: {
    extensions: ['.vue', '.ts'],
    alias: {
      "@": path.resolve(__dirname, "src"),
    }
  },
})

使用

<template>
  <el-button type="primary">Primary</el-button>
</template>

<script setup lang="ts">
import { ElButton } from 'element-plus'

</script>

<style scoped></style>

二.element-plus 图标库 安装

1.下载安装依赖

npm install @element-plus/icons-vue

2.注册所有图标

修改 main.ts ,(组件我使用的是自动引入，所以此处我都是注释了)

import { createApp } from 'vue'
import '@/assets/style/style.css'
import App from './App.vue'

// 以下是 完整引入 element plus 时使用
// import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'

// 引入图标库，如果您正在使用CDN引入，请删除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
app.mount('#app')

// 以下是 完整引入 element plus 时使用
// app.use(ElementPlus)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

使用

<template>
  <!-- 使用 el-icon 为 SVG 图标提供属性 -->
  <el-icon size="50" color="red">
    <Edit />
  </el-icon>

  <!-- 由于SVG图标默认不携带任何属性 -->
  <!-- 你需要直接提供它们 -->
  <Edit tyle="width: 1em; height: 1em; margin-right: 8px" />
</template>

<script setup lang="ts">

</script>

<style scoped></style>