Vue3 uses element-plus

1. Download package

 npm install element-plus --save

2. Introduction

        Global import + mount: Remember to have a css file when importing (if you can’t download it, it may be that the project is running, close it first)

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

const app = createApp(App);
app.use(ElementPlus)
app.mount('#app')

        Import on demand: first download two plug-ins

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

Modify the vue.config.js file

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({ 
  transpileDependencies: true,
  configureWebpack:{
    plugins:[
      AutoImport({
        resolves:[ElementPlusResolver()]
      }),
      Components({
        resolves:[ElementPlusResolver()]
      }),
    ]
  }
})

The way to introduce it globally - use

1. Buttons with icons

First modify the main.js file,

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import * as ElIconModules from '@element-plus/icons-vue'

const app = createApp(App);
app.use(ElementPlus)
// 注册全局组件
Object.keys(ElIconModules).forEach(key => {
    app.component(key, ElIconModules[key]);
});
app.mount('#app')

Use it directly in subcomponents 

<el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>

Effect:

Icon button ② 

The desired effect:

 As far as the current download and installation of the dependent package is concerned, the actual effect is: I don’t know why, but I will think about it later and solve it later.

2, icon icon

First download the icon's dependencies:

npm install @element-plus/icons-vue

Global import, modify the main.js file

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

Find the desired icon effect on the official website, click directly to copy the html code, ctrl+v to the compiler

<template>
  <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="inf
    o" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>
  <el-button type="primary">
    <el-icon style="vertical-align: middle;">
      <search />
    </el-icon>
    <span style="vertical-align: middle;"> Search </span>
  </el-button>
  
  <div>
    <el-switch v-model="value1" />
    <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  </div>
  
  <div>
    <el-icon><DeleteFilled /></el-icon>
  </div>
</template>
<script>
import { ref } from 'vue'
import {Check,Delete,Edit,Message,Search,Star,} from '@element-plus/icons-vue'
export default {
  components: {Check,Delete,Edit,Message,Search,Star,},
  setup() {
    const value1 = ref(false)
    const value2 = ref(true)
    return {value1,value2}
  }
};
</script>

<style>

</style>

Effect :

Change icon size and color: size has ":", color does not

  <el-icon :size="30" color="red"><DeleteFilled /></el-icon>

Modification effect:

 

3. Switch

 

<template>
  <div>
    <el-switch v-model="value1" />
    <el-switch
    v-model="value2"
    class="ml-2"
    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"/>
  </div>
  
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const value1 = ref(true)    //false初始化显示开关默认为关
    const value2 = ref(true)
    return {value1,value2}
  }
};
</script>

<style>

</style>

Effect: