vue3使用element-plus

1、下载包

 npm install element-plus --save

2、引入

        全局引入+挂载：引入记得有css文件（下载不下来可能是项目正在运行，先关掉）

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

        按需引入：先下载两个插件

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

修改vue.config.js文件

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()]
      }),
    ]
  }
})

全局引入的方式——使用

1、 带图标的按钮

先修改main.js文件，

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

在子组件直接使用 

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

效果：

图标按钮② 

想要的效果：

 就目前的下载安装的依赖包，实际实现的效果：不知道为什么，先放着后面想到了再来解决。

2、icon图标

先下载icon的依赖：

npm install @element-plus/icons-vue

全局引入，修改main.js文件

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

在官网找到想要的icon效果，直接点击即复制html代码，ctrl+v到编译器中

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

效果：​​​​​​​

更改图标大小和颜色：大小有“：”，颜色没有

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

修改效果：

3、开关

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

效果：