在vue3里面使用elmentplus

使用包管理器

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

 

完整引入#

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

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

 在vue3里面的elment跟vue2有不一样的图标使用

使用包管理器#

# 选择一个你喜欢的包管理器

# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue
# pnpm
$ pnpm install @element-plus/icons-vue

 

注册所有图标#

您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。

// main.ts

// 如果您正在使用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)
}

使用时需要单独引入图标

import { Camera, Right, Edit } from "@element-plus/icons-vue";

<!-- 使用 el-icon 为 SVG 图标提供属性 -->
<template>
  <div>
    <el-icon :size="size" :color="color">
      <Edit />
    </el-icon>
    <!-- 或者独立使用它，不从父级获取属性 -->
    <Edit />
  </div>
</template>

在button中

<el-button class="goButton" type="primary"

          ><span style="padding-right: 8px">前往查看</span>

          <el-icon :size="20">

            <Right />

          </el-icon>

        </el-button>

在input里

 <el-input

            v-model="inputData"

            style="width: 240px; height: 32px"

            placeholder="请输入"

            :suffix-icon="Search"

            @input="inputChange(inputData)"

            @blur="inputData = ''"

          />

官网链接一个 Vue 3 UI 框架 | Element Plus (element-plus.org)