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>
效果: