Vue3 Element Plus 应用开发实战1
1.安装 Element Plus
npm install element-plus --save
2.自动导入
npm install -D unplugin-vue-components unplugin-auto-import
配置 vue.config.js:
const AutoImport = require('unplugin-auto-import/webpack') const Components = require('unplugin-vue-components/webpack') const { ElementPlusResolver } = require('unplugin-vue-components/resolvers') module.exports = { configureWebpack: { plugins: [ AutoImport({ resolvers: [ElementPlusResolver()] }), Components({ resolvers: [ElementPlusResolver()] }) ] } }
3.使用图标
-
安装图标
npm install @element-plus/icons-vue
-
导入图标
import {Search} from '@element-plus/icons-vue'
-
注册图标组件
components: { Search }
-
使用图标
<el-icon :size="20"> <search /> </el-icon>
4.设计开发后台管理系统框架页面
html:
<template> <el-container class="home_container"> <!-- 头部区域 --> <el-header> <div class="banner-left"> <img src="../assets/images/x_food.png" alt="" style="width: 20px;"/> <span class="banner-title">清扬应用系统管理平台</span> </div> <div> <!--用户信息--> <el-dropdown> <span class="el-dropdown-link"> <el-tooltip content="用户名,您好!" placement="left-start" effect="light"> <el-avatar :size="32"> <el-icon :size="20"><stamp/></el-icon> </el-avatar> </el-tooltip> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>我的信息</el-dropdown-item> <el-dropdown-item>修改密码</el-dropdown-item> <el-dropdown-item divided>退出</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> <!--退出按钮--> <el-button type="info" style="margin-left: 12px;" @click="logout_handler"> 退出<el-icon class="el-icon--right"><close-bold /></el-icon> </el-button> </div> </el-header> <!-- 页面主体区域 --> <el-container> <!-- 侧边栏 --> <el-aside width="200px"> Aside </el-aside> <!-- 右侧内容主体区域 --> <el-main> Main </el-main> </el-container> </el-container> </template>
script:
import {CloseBold, Stamp} from '@element-plus/icons-vue' export default { name: 'App', components: { CloseBold, Stamp }, data () { return {} }, methods: { logout_handler () { window.localStorage.clear() // 路由跳转 } } }
style:
.home_container{ height: 100vh; } .el-header { background-color: #363D40; display: flex; justify-content: space-between; padding-left: 0; align-items: center; color: #fff; font-size: 20px; } .banner-left { display: flex; align-items: center; padding-left: 12px; } .banner-title { margin-left: 12px; } .el-aside{ background-color: #313743; color: #ffffff; padding: 6px; } .el-main{ background-color: #E9EDF1; padding: 6px; }
5.界面效果