二、Vue3集成Element-Plus

程序员三明治

发布于 2025-12-18 19:56:04

2350

文章被收录于专栏：码力up码力up

简介

Element-Plus是一套非常精美的前端UI框架，通过它可以快速实现精美的前端样式

Vue3集成Element-Plus

执行完 npm install

在根目录下，输入命令：

npm install element-plus --save

在main.js下引入element-plus

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')

有了element-plus就不用自己写css样式了，直接就能用

全局使用icon

Element Plus 提供了一套常用的图标集合。

如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。

安装

npm install @element-plus/icons-vue

注册所有图标

在main.js下去引入，需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

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

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

element-plus主题色设置

Element Plus 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。但是如果需要大规模替换样式，例如：将主题颜色从蓝色改为橙色或绿色，也许一个个将其覆盖起来不是一个好主意。

我们提供四种方法来改变样式变量。

安装依赖

npm i sass@1.71.1 -D
npm i unplugin-auto-import -D
npm i unplugin-element-plus -D
npm i unplugin-vue-components -D

配置index.css

@forward "element-plus/theme-chalk/src/common/var.scss" with (
  $colors: (
    'primary': (
      'base': #409eff,
    ),
    'success': (
      'base': #67c23a,
    ),
    'warning': (
      'base': #e6a23c,
    ),
    'danger': (
      'base': #f56c6c,
    ),
    'error': (
      'base': #f56c6c,
    ),
    'info': (
      'base': #909399,
    ),
  )
);

配置vite.config.css

import { createApp } from 'vue'
import './styles/element/index.scss'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)

如果你正在使用vite，并且你想在按需导入时自定义主题。

使用 scss.additionalData 来编译所有应用 scss 变量的组件。

import path from 'path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// You can also use unplugin-vue-components
// import Components from 'unplugin-vue-components/vite'
// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// or use unplugin-element-plus
import ElementPlus from 'unplugin-element-plus/vite'

export default defineConfig({
  resolve: {
    alias: {
      '~/': `${path.resolve(__dirname, 'src')}/`,
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "~/styles/element/index.scss" as *;`,
      },
    },
  },
  plugins: [
    vue(),
    // use unplugin-vue-components
    // Components({
    //   resolvers: [
    //     ElementPlusResolver({
    //       importStyle: "sass",
    //       // directives: true,
    //       // version: "2.1.5",
    //     }),
    //   ],
    // }),
    // or use unplugin-element-plus
    ElementPlus({
      useSource: true,
    }),
  ],
})

轮播图的使用

<template>
      <div>
      <el-carousel height="400px" type="card">
        <el-carousel-item v-for="item in data.imgs" :key="item">
          <img style="width: 100%; height: 100%" :src="item"/>
<!--          <h3 class="small justify-center" text="2xl">{{ item }}</h3>-->
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
      

import lun1 from '@/assets/muscle.jpg'
import lun2 from '@/assets/muscle2.jpg'
import lun3 from '@/assets/swim.jpg'

const data = reactive({
  imgs:[lun1, lun2, lun3]
})

分页pagination

current-page当前页数

page-size每页的个数

total：总共的数据个数

layout：分页的各种组件集合

<el-pagination
          v-model:current-page="data.currentPage1"
          v-model:page-size="data.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
      />

Dialog 对话框

<el-table-column label="show">
          <template #default="scope">
            {{scope.row.id}}
            <el-button @click="edit(scope.row)" type="primary" :icon="Edit"/>
          </template>
</el-table-column>

const edit = (row) => {
  data.row = row
  data.dialogVisible = true
}

<el-dialog v-model="data.dialogVisible" title="弹窗" width="800">
      <div>{{data.row.date}}</div>
      <div>{{data.row.name}}</div>
      <div>{{data.row.address}}</div>
</el-dialog>