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

在子组件直接使用 

    
      
    
     Search 
  

效果：

图标按钮② 

想要的效果：

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

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到编译器中

效果：​​​​​​​

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

修改效果：

 

3、开关

 

效果：